@bbl-digital/snorre 4.2.82 → 4.2.83

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

@@ -1,78 +0,0 @@
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-import bp from '../../../globals/styles/breakpoints';
-export const ListItem = styled.li `
-  list-style: none;
-`;
-export const Wrapper = styled.button((props) => css `
-    display: flex;
-    min-height: 50px;
-    width: 100%;
-    border-radius: ${props.lightTheme ? '8px 0 0 8px' : '4px 0 0 4px'};
-    border: none;
-    background-color: transparent;
-    padding-left: 1em;
-    padding-right: 0;
-    align-items: center;
-    outline: none;
-    cursor: pointer;
-
-    &.active {
-      background: ${props.lightTheme
-    ? props.theme.lightMenuItemActiveBackground
-    : props.theme.defaultMenuItemActiveBackground};
-
-      & > span {
-        font-weight: 700;
-      }
-    }
-
-    & > span {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      text-align: left;
-      line-height: 24px;
-      font-weight: 600;
-      white-space: nowrap;
-
-      & > svg {
-        margin-right: 10px;
-        min-width: 14px;
-      }
-
-      & > span {
-        transition: width 0.2s ease-out;
-        overflow: hidden;
-        width: ${props.small ? '0' : '100%'};
-      }
-    }
-
-    &:hover,
-    &:focus {
-      text-decoration: underline;
-      background-color: transparent;
-      text-underline-offset: 2px;
-      text-decoration-color: ${props.lightTheme
-    ? props.theme.lightMenuTextColor
-    : props.theme.defaultMenuTextColor};
-
-      &.active {
-        background: ${props.lightTheme
-    ? props.theme.lightMenuItemActiveBackground
-    : props.theme.defaultMenuItemActiveBackground};
-      }
-    }
-
-    @media screen and (max-width: ${bp.medium}) {
-      padding: 0 40px;
-      border-radius: 0;
-    }
-  `);
-export const Span = styled.span((props) => css `
-    & > span {
-      transition: width 0.2s ease-out;
-      overflow: hidden;
-      width: ${props.small ? '0' : '100%'};
-    }
-  `);

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/packages/layout/Menu/MenuSpacer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAGjC,UAAU,MAAM;IACd,eAAe;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,MAAM,CAE1B,CAAA;AAED,eAAe,UAAU,CAAA"}

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/packages/layout/Menu/MenuSpacer/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO;;SAewK,MAAO,WAAW;yGAD7M,CAAA"}

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

@@ -1,17 +0,0 @@
-import styled from '@emotion/styled';
-import bp from '../../../globals/styles/breakpoints';
-export const Wrapper = styled.div `
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  max-height: 100%;
-  justify-content: space-between;
-  overflow: inherit;
-  gap: 0.5em;
-
-  @media screen and (max-width: ${bp.medium}) {
-    gap: 0em;
-    height: unset;
-  }
-`;

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/packages/layout/Menu/MenuTop/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAIvC,UAAU,MAAM;IACd,uCAAuC;IACvC,KAAK,EAAE,OAAO,CAAA;IACd,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,eAAe;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;CAC/C;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAgB7B,CAAA;AAED,eAAe,OAAO,CAAA"}

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

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from 'react';
-import { StyledLink, Logo, AppPickerWrapper } from './styles';
-const MenuTop = ({ small, logo, onLogoClick, children }) => {
-    return (_jsxs(Fragment, { children: [logo && (_jsx(StyledLink, { nostyle: true, onClick: onLogoClick, trackingName: "Sidemenu", trackingEvent: "Menu click: logo", children: _jsx(Logo, { small: small, alt: "logo", src: logo }) })), _jsx(AppPickerWrapper, { children: children })] }));
-};
-export default MenuTop;

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/packages/layout/Menu/MenuTop/styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,UAAU;gBAOnB,MAAK,SAAS;iBAEuB,MACvC,SAGD;0BAEQ,MAAM,SAAS;;;;sBAcpB,MAAO,UAAU;wBAIZ,MAAO,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA9BzB,CAAA;AAED,eAAO,MAAM,IAAI,8JAMhB,CAAA;AAED,eAAO,MAAM,gBAAgB;;SAM3B,MAAO,WACT;yGAuBC,CAAA"}

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

@@ -1,44 +0,0 @@
-import styled from '@emotion/styled';
-import Link from '../../../core/Link';
-import { css } from '@emotion/react';
-import bp from '../../../globals/styles/breakpoints';
-export const StyledLink = styled(Link) `
-  min-height: 40px;
-  margin-top: 0.5em;
-`;
-export const Logo = styled.img((props) => css `
-    cursor: pointer;
-    max-height: 40px;
-    max-width: ${props.small ? '100%' : 'auto'};
-  `);
-export const AppPickerWrapper = styled.div `
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  margin-top: 40px;
-  min-height: 85px;
-  overflow: hidden;
-
-  @media screen and (max-height: ${bp.heightMedium}) {
-    margin-top: 2em;
-  }
-
-  @media screen and (max-height: ${bp.heightSmall}) {
-    margin-top: 1em;
-  }
-
-  @media screen and (max-width: ${bp.medium}) {
-    padding: 2em 2.5em;
-    margin-top: 0;
-    align-items: center;
-    justify-content: center;
-
-    button {
-      margin-bottom: 0;
-    }
-  }
-
-  & > a:nth-of-type(2) {
-    margin-left: 0.5em;
-  }
-`;

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/packages/layout/Menu/SecondaryMenu/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,UAAU,MAAM;IACd,uCAAuC;IACvC,KAAK,EAAE,OAAO,CAAA;IACd,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,eAAe;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CA4CnC,CAAA;AAED,eAAe,aAAa,CAAA"}

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

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useTheme } from '@emotion/react';
-import { getContrastColor, IconChevronLeft, Text, useIsMobile } from '../../..';
-import { CollapseWrapper, IconWrapper, Wrapper, ChildrenWrapper, } from './styles';
-const SecondaryMenu = ({ small, lightTheme, label, onMenuToggle, children, }) => {
-    const theme = useTheme();
-    const isMobile = useIsMobile();
-    return (_jsxs(Wrapper, { children: [!small && _jsx(ChildrenWrapper, { children: children }), (label || !isMobile) && (_jsxs(CollapseWrapper, { open: !small, lightTheme: lightTheme, children: [_jsx(IconWrapper, { "aria-label": "Toggle meny", open: !small, lightTheme: lightTheme, theme: theme, onClick: () => onMenuToggle && onMenuToggle(small), "data-tracking-name": "Sidemenu", "data-tracking-event": 'Menu toggle: ' + (!small ? 'collapse' : 'expand'), children: _jsx(IconChevronLeft, { size: "9px", color: lightTheme
-                                ? getContrastColor(theme.illustrationPrimary10, theme.btnDefault)
-                                : 'white' }) }), !small && label && _jsx(Text, { size: "10px", children: label })] }))] }));
-};
-export default SecondaryMenu;

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/packages/layout/Menu/SecondaryMenu/styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,OAAO;;SAkBP,MAAO,WAAW;yGAX9B,CAAA;AAED,eAAO,MAAM,eAAe;;SASf,MAAO,WAAW;yGAK9B,CAAA;AAED,eAAO,MAAM,eAAe,uJA4B3B,CAAA;AAED,eAAO,MAAM,WAAW,mKA8BvB,CAAA"}

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

@@ -1,83 +0,0 @@
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import bp from '../../../globals/styles/breakpoints';
-import { defaultOutline } from '../../../globals/styles/styles';
-export const Wrapper = styled.div `
-  display: grid;
-  grid-row-gap: 2em;
-
-  @media screen and (max-height: ${bp.heightMedium}) {
-    grid-row-gap: 0;
-  }
-`;
-export const ChildrenWrapper = styled.div `
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  width: calc(100% - 40px);
-  padding-left: 40px;
-  overflow: hidden;
-
-  @media screen and (max-width: ${bp.medium}) {
-    position: relative;
-    bottom: unset;
-    margin-top: 2.5em;
-  }
-`;
-export const CollapseWrapper = styled.div((props) => css `
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding-bottom: ${props.open ? '1em' : 'calc(1em + 13px)'};
-    text-align: center;
-
-    & > span {
-      overflow: hidden;
-      white-space: nowrap;
-      color: ${props.lightTheme ? '#7C899E' : 'white'};
-      opacity: ${props.lightTheme ? 1 : 0.5};
-    }
-
-    @media screen and (max-width: ${bp.medium}) {
-      position: relative;
-      margin-top: 2em;
-      display: block;
-      button {
-        display: none;
-      }
-    }
-
-    @media screen and (max-height: ${bp.heightMedium}) {
-      padding-bottom: ${props.open ? '0.25em' : 'calc(0.25em + 13px)'};
-    }
-  `);
-export const IconWrapper = styled.button((props) => css `
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 0 auto;
-    height: 24px;
-    width: 24px;
-    border-radius: 50%;
-    border: none;
-    cursor: pointer;
-    outline: none;
-    background: ${props.lightTheme
-    ? props.theme.illustrationPrimary10
-    : 'rgba(255, 255, 255, 0.16)'};
-    margin-bottom: 1em;
-    transition: transform 0.2s ease-in-out;
-    transform: rotate(${props.open ? '0deg' : '180deg'});
-
-    &:hover,
-    &:focus {
-      background: ${props.lightTheme
-    ? props.theme.illustrationPrimary10
-    : 'rgba(255, 255, 255, 0.16)'};
-    }
-
-    &:focus-visible {
-      outline: ${defaultOutline};
-    }
-  `);

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/packages/layout/Menu/SecondaryMenuItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,UAAU,MAAM;IACd,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,2BAA2B;IAC3B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uBAAuB;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAyBvC,CAAA;AAED,eAAe,iBAAiB,CAAA"}

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

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Wrapper } from './styles';
-import { useTheme } from '@emotion/react';
-import Text from '../../../core/Text';
-const SecondaryMenuItem = ({ icon, lightTheme, label, href, target, }) => {
-    const theme = useTheme();
-    const color = lightTheme
-        ? theme.lightMenuExternalLinkColor
-        : theme.defaultMenuExternalLinkColor;
-    return (_jsxs(Wrapper, { href: href, color: color, trackingEvent: 'Menu click: ' + label, trackingName: "Sidemenu", target: target, children: [icon, _jsx(Text, { color: color, size: "15px", children: label })] }));
-};
-export default SecondaryMenuItem;

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/packages/layout/Menu/SecondaryMenuItem/styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,OAAO,wDAiCnB,CAAA"}

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

@@ -1,35 +0,0 @@
-import styled from '@emotion/styled';
-import Link from '../../../core/Link';
-import { css } from '@emotion/react';
-export const Wrapper = styled(Link)((props) => css `
-    width: auto;
-    border-bottom: 1px solid ${props.color};
-    border-radius: 0;
-    padding-bottom: 0.25em;
-    margin-bottom: 1em;
-    overflow: hidden;
-    white-space: nowrap;
-
-    & > span {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      text-align: left;
-      line-height: 24px;
-      font-weight: normal;
-
-      & svg {
-        margin-right: 10px;
-      }
-    }
-
-    text-decoration: none;
-
-    &:focus-visible {
-      text-decoration: underline;
-    }
-
-    &:hover {
-      border-bottom: 1px solid ${props.color};
-    }
-  `);

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

@@ -1,19 +0,0 @@
-import { Meta } from '@storybook/react';
-declare const _default: Meta;
-export default _default;
-export declare const MenuDefault: {
-    render: () => import("react/jsx-runtime").JSX.Element;
-    name: string;
-};
-export declare const Collapsed: {
-    render: () => import("react/jsx-runtime").JSX.Element;
-    name: string;
-};
-export declare const LightTheme: {
-    render: () => import("react/jsx-runtime").JSX.Element;
-    name: string;
-};
-export declare const LightThemeCollapsed: {
-    render: () => import("react/jsx-runtime").JSX.Element;
-    name: string;
-};

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

@@ -1 +0,0 @@
-{"version":3,"file":"Sidemenu.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/layout/Menu/Sidemenu.stories.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;wBAYlC,IAAI;AAVT,wBAUS;AAET,eAAO,MAAM,WAAW;;;CA6FvB,CAAA;AAED,eAAO,MAAM,SAAS;;;CAuDrB,CAAA;AAED,eAAO,MAAM,UAAU;;;CAyDtB,CAAA;AAED,eAAO,MAAM,mBAAmB;;;CAmD/B,CAAA"}

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

@@ -1,37 +0,0 @@
-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',
-            },
-        },
-    },
-};
-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',
-};
-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',
-};
-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',
-};

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/layout/Menu/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,UAAU,MAAM;IACd,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,2CAA2C;IAC3C,IAAI,EAAE,OAAO,CAAA;IACb,eAAe;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAO1B,CAAA;AAED,eAAe,IAAI,CAAA"}

package/lib/layout/Menu/index.js

@@ -1,8 +0,0 @@
-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 }));
-};
-export default Menu;

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

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/packages/layout/Menu/styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAEjD,UAAU,MAAM;IACd,IAAI,EAAE,OAAO,CAAA;IACb,UAAU,EAAE,OAAO,CAAA;IACnB,KAAK,EAAE,SAAS,CAAA;CACjB;AAED,eAAO,MAAM,OAAO;;SAUO,MAAO,WACjC;kHAiBA,CAAA"}

package/lib/layout/Menu/styles.js

@@ -1,30 +0,0 @@
-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;
-
-    @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

@@ -1,27 +0,0 @@
-import { Meta } from '@storybook/react';
-declare const _default: Meta;
-export default _default;
-export declare const SubmenuDefault: {
-    render: () => import("react/jsx-runtime").JSX.Element;
-    name: string;
-};
-export declare const Lighttheme: {
-    render: () => import("react/jsx-runtime").JSX.Element;
-    name: string;
-};
-export declare const LightthemeIllustration: {
-    render: () => import("react/jsx-runtime").JSX.Element;
-    name: string;
-};
-export declare const NoItems: {
-    render: () => import("react/jsx-runtime").JSX.Element;
-    name: string;
-};
-export declare const NoItemsLight: {
-    render: () => import("react/jsx-runtime").JSX.Element;
-    name: string;
-};
-export declare const CustomHeader: {
-    render: () => import("react/jsx-runtime").JSX.Element;
-    name: string;
-};

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

@@ -1 +0,0 @@
-{"version":3,"file":"Submenu.stories.d.ts","sourceRoot":"","sources":["../../../src/packages/layout/Submenu/Submenu.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;wBAKlC,IAAI;AAHT,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

@@ -1,35 +0,0 @@
-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,
-};
-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',
-};
-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',
-};
-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',
-};
-export const NoItems = {
-    render: () => _jsx(Submenu, { header: "Just a header" }),
-    name: 'No items',
-};
-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',
-};

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/packages/layout/Submenu/SubmenuItem/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAmB,MAAM,OAAO,CAAA;AAUvC,UAAU,MAAM;IACd,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,8BAA8B;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,0CAA0C;IAC1C,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAwEjC,CAAA;AAED,eAAe,WAAW,CAAA"}

package/lib/layout/Submenu/SubmenuItem/index.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
-import { Fragment } from 'react';
-import { Wrapper, optionButton, FocusState } from './styles';
-import Text from '../../../core/Text';
-import { useTheme } from '@emotion/react';
-import { useIsMobile } from '../../../hooks/useIsMobile';
-import ListItem from '../../../core/List/Item';
-import Button from '../../../core/Button';
-import { AnimatePresence } from 'motion/react';
-const SubmenuItem = ({ lightTheme, active, label, className, showActiveitemLabel, onClick, onChange, }) => {
-    const theme = useTheme();
-    const isMobile = useIsMobile();
-    const handleOptionClick = () => {
-        onClick && onClick();
-        onChange && onChange();
-    };
-    const labelColor = lightTheme
-        ? theme.secondaryDarkText
-        : !active
-            ? theme.submenuTextColor
-            : theme.submenuTextColorActive;
-    if (showActiveitemLabel) {
-        if (active) {
-            return _jsx(Fragment, { children: label });
-        }
-        return null;
-    }
-    return !isMobile ? (_jsx(ListItem, { children: _jsx(Button, { role: "menuitem", "aria-current": active ? 'page' : undefined, nostyle: true, onClick: onClick, css: FocusState(lightTheme ? theme.primary : 'white'), trackingName: "Submenu", trackingEvent: 'Submenu click: ' + label, className: className, children: _jsx(AnimatePresence, { children: _jsx(Wrapper, { active: active, lightTheme: lightTheme, background: lightTheme ? '#ffffff' : theme.submenuItemColor, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.1 }, children: _jsx(Text, { color: labelColor, semibold: true, children: label }) }) }) }) })) : (_jsx(ListItem, { children: _jsx(Button, { role: "menuitem", "aria-current": active ? 'page' : undefined, nostyle: true, css: optionButton, onClick: handleOptionClick, children: label }) }));
-};
-export default SubmenuItem;

package/lib/layout/Submenu/SubmenuItem/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/packages/layout/Submenu/SubmenuItem/styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,OAAO,wDAcnB,CAAA;AAED,eAAO,MAAM,YAAY,2CAKxB,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,8CAOvC,CAAA"}

package/lib/layout/Submenu/SubmenuItem/styles.js

@@ -1,30 +0,0 @@
-import styled from '@emotion/styled';
-import { css } from '@emotion/react';
-import { motion } from 'motion/react';
-export const Wrapper = styled(motion.div)((props) => css `
-    padding: 0.65em 1em;
-    border-radius: ${props.lightTheme ? '19px' : '7px'};
-    border: 1px solid transparent;
-    transition: border-color 0.1s ease-in-out;
-
-    background: ${props.active ? props.background : 'transparent'};
-    box-shadow: ${props.active ? '0 2px 4px 0 rgba(9, 28, 68, 0.2)' : 'none'};
-
-    & > span {
-      font-size: 14px;
-    }
-  `);
-export const optionButton = css `
-  padding-left: 8px;
-  justify-content: flex-start;
-  height: 100%;
-  width: 100%;
-`;
-export const FocusState = (color) => css `
-  &:focus {
-    text-decoration: none;
-    div {
-      border-color: ${color};
-    }
-  }
-`;

package/lib/layout/Submenu/SubmenuLightThemeBg/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/packages/layout/Submenu/SubmenuLightThemeBg/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,UAAU,MAAM;IACd,eAAe;IACf,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CAqCzC,CAAA;AAED,eAAe,mBAAmB,CAAA"}

package/lib/layout/Submenu/SubmenuLightThemeBg/index.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SubmenuLightThemeBg = ({ bgColor }) => {
-    return (_jsxs("svg", { viewBox: "0 0 1190 203", children: [_jsx("defs", { children: _jsx("rect", { id: "submenutlightbg-path-1", x: "0", y: "0", width: "1190", height: "203" }) }), _jsx("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: _jsxs("g", { children: [_jsxs("g", { children: [_jsx("use", { fill: bgColor, xlinkHref: "#submenutlightbg-path-1" }), _jsx("use", { fillOpacity: "0.65", fill: "#FFFFFF", xlinkHref: "#submenutlightbg-path-1" })] }), _jsx("path", { d: "M0,-7.10542736e-15 L1190,-7.10542736e-15 L1190,88.8453479 C1120.50089,91.9625955 1033.23979,87.7081866 928.216686,76.0821213 C770.682033,58.6430234 508.737167,17.7258334 345,22.3521602 C246.122292,25.1459094 131.122292,33.1523167 0,46.371382 L0,-7.10542736e-15 Z", fillOpacity: "0.2", fill: "#FFFFFF" }), _jsx("path", { d: "M0,-7.10542736e-15 L1190,-7.10542736e-15 L1190,88.8453479 C1120.50089,91.9625955 1033.23979,87.7081866 928.216686,76.0821213 C770.682033,58.6430234 508.737167,17.7258334 345,22.3521602 C246.122292,25.1459094 131.122292,33.1523167 0,46.371382 L0,-7.10542736e-15 Z", fillOpacity: "0.2", fill: "#FFFFFF", transform: "translate(595.000000, 44.916995) scale(-1, 1) translate(-595.000000, -44.916995) " })] }) })] }));
-};
-export default SubmenuLightThemeBg;

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/layout/Submenu/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAK,EAAE,EACZ,cAAc,EAMf,MAAM,OAAO,CAAA;AAsBd,UAAU,MAAM;IACd,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,8BAA8B;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oBAAoB;IACpB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,8BAA8B;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,uBAAuB;IACvB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,GAAG,CAAA;CACtC;AAED,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CA6I7B,CAAA;AAED,eAAe,OAAO,CAAA"}