@bbl-digital/snorre 4.2.74 → 4.2.75

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

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

package/lib/layout/Layout/styles.js

@@ -1,17 +1,14 @@
-"use strict";
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+export const Wrapper = styled.div(({ maxWidth }) => css `
+    padding: 2em 2.5em;
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Wrapper = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = require("@emotion/react");
-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: "e1taemdl0"
-} : {
-  target: "e1taemdl0",
-  label: "Wrapper"
-})(({
-  maxWidth
-}) => /*#__PURE__*/(0, _react.css)("padding:2em 2.5em;@media screen and (max-width: 768px){padding:1.5em 1em;}", maxWidth && /*#__PURE__*/(0, _react.css)("max-width:", maxWidth, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Wrapper;")), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Wrapper;")));
+    @media screen and (max-width: 768px) {
+      padding: 1.5em 1em;
+    }
+
+    ${maxWidth &&
+    css `
+      max-width: ${maxWidth};
+    `}
+  `);

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

@@ -2,15 +2,14 @@ import { Meta } from '@storybook/react';
 declare const _default: Meta;
 export default _default;
 export declare const Default: {
-    render: () => import("react").JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
     name: string;
 };
 export declare const WithSidebar: {
-    render: () => import("react").JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
     name: string;
 };
 export declare const SkipToMainContent: {
-    render: () => import("react").JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
     name: string;
 };
-//# sourceMappingURL=LayoutShell.stories.d.ts.map

package/lib/layout/LayoutShell/LayoutShell.stories.js

@@ -1,123 +1,68 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.WithSidebar = exports.SkipToMainContent = exports.Default = void 0;
-var _ = _interopRequireDefault(require("."));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Layout/LayoutShell',
-  component: _.default
+import { jsx as _jsx } from "react/jsx-runtime";
+import LayoutShell from '.';
+export default {
+    title: 'Layout/LayoutShell',
+    component: LayoutShell,
 };
-const Default = exports.Default = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    topBar: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        backgroundColor: 'red',
-        height: '60px',
-        paddingLeft: '20px',
-        position: 'absolute',
-        width: '100%'
-      },
-      children: "topbar"
-    }),
-    footer: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        backgroundColor: 'green',
-        paddingLeft: '20px'
-      },
-      children: "Hello this is footer"
-    }),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      style: {
-        padding: '20px',
-        width: '100%',
-        backgroundColor: 'pink',
-        height: '100%'
-      },
-      children: "Content"
-    })
-  }),
-  name: 'Default'
+export const Default = {
+    render: () => (_jsx(LayoutShell, { topBar: _jsx("div", { style: {
+                backgroundColor: 'red',
+                height: '60px',
+                paddingLeft: '20px',
+                position: 'absolute',
+                width: '100%',
+            }, children: "topbar" }), footer: _jsx("div", { style: {
+                backgroundColor: 'green',
+                paddingLeft: '20px',
+            }, children: "Hello this is footer" }), children: _jsx("span", { style: {
+                padding: '20px',
+                width: '100%',
+                backgroundColor: 'pink',
+                height: '100%',
+            }, children: "Content" }) })),
+    name: 'Default',
 };
-const WithSidebar = exports.WithSidebar = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    topBar: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        backgroundColor: 'red',
-        height: '60px',
-        paddingLeft: '20px',
-        position: 'absolute',
-        width: '100%'
-      },
-      children: "topbar"
-    }),
-    footer: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        backgroundColor: 'green',
-        paddingLeft: '20px'
-      },
-      children: "Hello this is footer"
-    }),
-    sideBar: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        backgroundColor: 'orange',
-        height: '100%',
-        paddingLeft: '20px'
-      },
-      children: "Sidebar"
-    }),
-    sideBarWidth: "250px",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      style: {
-        padding: '20px',
-        width: '100%',
-        backgroundColor: 'pink',
-        height: '100%'
-      },
-      children: "Content"
-    })
-  }),
-  name: 'With sidebar'
+export const WithSidebar = {
+    render: () => (_jsx(LayoutShell, { topBar: _jsx("div", { style: {
+                backgroundColor: 'red',
+                height: '60px',
+                paddingLeft: '20px',
+                position: 'absolute',
+                width: '100%',
+            }, children: "topbar" }), footer: _jsx("div", { style: {
+                backgroundColor: 'green',
+                paddingLeft: '20px',
+            }, children: "Hello this is footer" }), sideBar: _jsx("div", { style: {
+                backgroundColor: 'orange',
+                height: '100%',
+                paddingLeft: '20px',
+            }, children: "Sidebar" }), sideBarWidth: "250px", children: _jsx("span", { style: {
+                padding: '20px',
+                width: '100%',
+                backgroundColor: 'pink',
+                height: '100%',
+            }, children: "Content" }) })),
+    name: 'With sidebar',
+};
+export const SkipToMainContent = {
+    render: () => (_jsx(LayoutShell, { topBar: _jsx("div", { style: {
+                backgroundColor: 'red',
+                height: '60px',
+                paddingLeft: '20px',
+                position: 'absolute',
+                width: '100%',
+            } }), footer: _jsx("div", { style: {
+                backgroundColor: 'green',
+                paddingLeft: '20px',
+            } }), sideBar: _jsx("div", { style: {
+                backgroundColor: 'orange',
+                height: '100%',
+                paddingLeft: '20px',
+            } }), sideBarWidth: "250px", onSkipToMainContent: () => console.log('skip to main content'), onSkipToNav: () => console.log('skip to nav'), children: _jsx("span", { style: {
+                padding: '20px',
+                width: '100%',
+                backgroundColor: 'pink',
+                height: '100%',
+            }, children: "Press tab to show hidden links" }) })),
+    name: 'Skip to main content',
 };
-const SkipToMainContent = exports.SkipToMainContent = {
-  render: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-    topBar: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        backgroundColor: 'red',
-        height: '60px',
-        paddingLeft: '20px',
-        position: 'absolute',
-        width: '100%'
-      }
-    }),
-    footer: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        backgroundColor: 'green',
-        paddingLeft: '20px'
-      }
-    }),
-    sideBar: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      style: {
-        backgroundColor: 'orange',
-        height: '100%',
-        paddingLeft: '20px'
-      }
-    }),
-    sideBarWidth: "250px",
-    onSkipToMainContent: () => console.log('skip to main content'),
-    onSkipToNav: () => console.log('skip to nav'),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-      style: {
-        padding: '20px',
-        width: '100%',
-        backgroundColor: 'pink',
-        height: '100%'
-      },
-      children: "Press tab to show hidden links"
-    })
-  }),
-  name: 'Skip to main content'
-};

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

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

package/lib/layout/LayoutShell/index.js

@@ -1,57 +1,12 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _styles = require("./styles");
-var _jsxRuntime = require("@emotion/react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
-
-const LayoutShell = /*#__PURE__*/_react.default.memo(({
-  sideBar,
-  sideBarWidth,
-  topBar,
-  children,
-  footer,
-  withTabs,
-  onSkipToMainContent,
-  onSkipToNav
-}) => {
-  const SkipToMainContentLink = (0, _jsxRuntime.jsx)("button", {
-    css: theme => (0, _styles.skipLinkStyle)(theme),
-    onClick: onSkipToMainContent,
-    role: "link",
-    "data-tracking-name": "Felles",
-    "data-tracking-event": "Klikk: G\xE5 til hovedinnhold",
-    children: "G\xE5 til hovedinnhold"
-  });
-  const SkipToNavLink = (0, _jsxRuntime.jsx)("button", {
-    css: theme => (0, _styles.skipLinkStyle)(theme),
-    role: "link",
-    onClick: onSkipToNav,
-    "data-tracking-name": "Felles",
-    "data-tracking-event": "Klikk: G\xE5 til undermeny",
-    children: "G\xE5 til undermeny"
-  });
-  const hasSideBar = Boolean(sideBar && sideBarWidth);
-  const Tag = Boolean(withTabs || hasSideBar) ? _styles.WrapperTag : _react.Fragment;
-  return (0, _jsxRuntime.jsxs)(Tag, {
-    sideBarWidth: sideBarWidth ? sideBarWidth : undefined,
-    children: [onSkipToNav && SkipToNavLink, onSkipToMainContent && SkipToMainContentLink, hasSideBar ? (0, _jsxRuntime.jsx)(_styles.SideBar, {
-      sideBarWidth: sideBarWidth,
-      children: sideBar
-    }) : (0, _jsxRuntime.jsx)(_react.Fragment, {}), (0, _jsxRuntime.jsxs)(_styles.MainContent, {
-      sideBarWidth: sideBarWidth,
-      children: [topBar, (0, _jsxRuntime.jsx)(_styles.Content, {
-        children: children
-      })]
-    }), hasSideBar ? (0, _jsxRuntime.jsx)(_styles.FooterWrapper, {
-      children: footer
-    }) : footer]
-  });
+import React, { Fragment } from 'react';
+import { Content, FooterWrapper, MainContent, SideBar, WrapperTag, skipLinkStyle, } from './styles';
+const LayoutShell = React.memo(({ sideBar, sideBarWidth, topBar, children, footer, withTabs, onSkipToMainContent, onSkipToNav, }) => {
+    const SkipToMainContentLink = (_jsx("button", { css: (theme) => skipLinkStyle(theme), onClick: onSkipToMainContent, role: "link", "data-tracking-name": "Felles", "data-tracking-event": "Klikk: G\u00E5 til hovedinnhold", children: "G\u00E5 til hovedinnhold" }));
+    const SkipToNavLink = (_jsx("button", { css: (theme) => skipLinkStyle(theme), role: "link", onClick: onSkipToNav, "data-tracking-name": "Felles", "data-tracking-event": "Klikk: G\u00E5 til undermeny", children: "G\u00E5 til undermeny" }));
+    const hasSideBar = Boolean(sideBar && sideBarWidth);
+    const Tag = Boolean(withTabs || hasSideBar) ? WrapperTag : Fragment;
+    return (_jsxs(Tag, { sideBarWidth: sideBarWidth ? sideBarWidth : undefined, children: [onSkipToNav && SkipToNavLink, onSkipToMainContent && SkipToMainContentLink, hasSideBar ? (_jsx(SideBar, { sideBarWidth: sideBarWidth, children: sideBar })) : (_jsx(Fragment, {})), _jsxs(MainContent, { sideBarWidth: sideBarWidth, children: [topBar, _jsx(Content, { children: children })] }), hasSideBar ? _jsx(FooterWrapper, { children: footer }) : footer] }));
 });
-var _default = exports.default = LayoutShell;
+export default LayoutShell;

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

@@ -21,4 +21,3 @@ export declare const Content: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 export declare const skipLinkStyle: (theme: IAppTheme) => import("@emotion/react").SerializedStyles;
 export {};
-//# sourceMappingURL=styles.d.ts.map

package/lib/layout/LayoutShell/styles.js

@@ -1,73 +1,59 @@
-"use strict";
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { defaultOutline } from '../../globals/styles/styles';
+const withoutSideBar = css `
+  padding-bottom: 80px;
+`;
+const withSideBar = css `
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  width: 100vw;
+`;
+export const WrapperTag = styled.div((props) => css `
+    ${props.sideBarWidth && withSideBar}
+    ${!props.sideBarWidth && withoutSideBar}
+  `);
+export const MainContent = styled.div((props) => css `
+    display: ${props.sideBarWidth ? 'flex' : 'grid'};
+    width: ${props.sideBarWidth
+    ? `calc(100vw - ${props.sideBarWidth})`
+    : '100%'};
+    flex-direction: row;
+    transition: width 0.2s ease-in-out;
+  `);
+export const FooterWrapper = styled.div `
+  grid-column: 2/3;
+`;
+export const SideBar = styled.aside((props) => css `
+    position: relative;
+    width: ${props.sideBarWidth};
+    transition: width 0.2s ease-in-out;
+  `);
+export const Content = styled.main `
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100vh - 60px - 60px);
+  width: 100%;
+  margin-top: 60px;
+`;
+export const skipLinkStyle = (theme) => css `
+  position: fixed;
+  z-index: -9999;
+  top: 1px;
+  left: -999px;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  border: none;
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.skipLinkStyle = exports.WrapperTag = exports.SideBar = exports.MainContent = exports.FooterWrapper = exports.Content = void 0;
-var _base = _interopRequireDefault(require("@emotion/styled/base"));
-var _react = require("@emotion/react");
-var _styles = require("../../globals/styles/styles");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const withoutSideBar = process.env.NODE_ENV === "production" ? {
-  name: "1t8kox4",
-  styles: "padding-bottom:80px"
-} : {
-  name: "1j7sf2l-withoutSideBar",
-  styles: "padding-bottom:80px;label:withoutSideBar;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-const withSideBar = process.env.NODE_ENV === "production" ? {
-  name: "75b7ct",
-  styles: "display:grid;grid-template-columns:1fr 1fr;width:100vw"
-} : {
-  name: "tg3hn-withSideBar",
-  styles: "display:grid;grid-template-columns:1fr 1fr;width:100vw;label:withSideBar;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-const WrapperTag = exports.WrapperTag = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "ercarvp4"
-} : {
-  target: "ercarvp4",
-  label: "WrapperTag"
-})(props => /*#__PURE__*/(0, _react.css)(props.sideBarWidth && withSideBar, " ", !props.sideBarWidth && withoutSideBar, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:WrapperTag;")));
-const MainContent = exports.MainContent = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "ercarvp3"
-} : {
-  target: "ercarvp3",
-  label: "MainContent"
-})(props => /*#__PURE__*/(0, _react.css)("display:", props.sideBarWidth ? 'flex' : 'grid', ";width:", props.sideBarWidth ? `calc(100vw - ${props.sideBarWidth})` : '100%', ";flex-direction:row;transition:width 0.2s ease-in-out;" + (process.env.NODE_ENV === "production" ? "" : ";label:MainContent;")));
-const FooterWrapper = exports.FooterWrapper = /*#__PURE__*/(0, _base.default)("div", process.env.NODE_ENV === "production" ? {
-  target: "ercarvp2"
-} : {
-  target: "ercarvp2",
-  label: "FooterWrapper"
-})(process.env.NODE_ENV === "production" ? {
-  name: "pyv407",
-  styles: "grid-column:2/3"
-} : {
-  name: "pyv407",
-  styles: "grid-column:2/3",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const SideBar = exports.SideBar = /*#__PURE__*/(0, _base.default)("aside", process.env.NODE_ENV === "production" ? {
-  target: "ercarvp1"
-} : {
-  target: "ercarvp1",
-  label: "SideBar"
-})(props => /*#__PURE__*/(0, _react.css)("position:relative;width:", props.sideBarWidth, ";transition:width 0.2s ease-in-out;" + (process.env.NODE_ENV === "production" ? "" : ";label:SideBar;")));
-const Content = exports.Content = /*#__PURE__*/(0, _base.default)("main", process.env.NODE_ENV === "production" ? {
-  target: "ercarvp0"
-} : {
-  target: "ercarvp0",
-  label: "Content"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1inpstx",
-  styles: "display:flex;flex-direction:column;min-height:calc(100vh - 60px - 60px);width:100%;margin-top:60px"
-} : {
-  name: "1inpstx",
-  styles: "display:flex;flex-direction:column;min-height:calc(100vh - 60px - 60px);width:100%;margin-top:60px",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const skipLinkStyle = theme => /*#__PURE__*/(0, _react.css)("position:fixed;z-index:-9999;top:1px;left:-999px;overflow:hidden;width:1px;height:1px;border:none;&:focus-visible{", _styles.defaultOutline, " width:auto;height:auto;overflow:auto;z-index:9999;left:1px;padding:5px;background:", theme.info, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:skipLinkStyle;"));
-exports.skipLinkStyle = skipLinkStyle;
+  &:focus-visible {
+    ${defaultOutline}
+    width: auto;
+    height: auto;
+    overflow: auto;
+    z-index: 9999;
+    left: 1px;
+    padding: 5px;
+    background: ${theme.info};
+  }
+`;

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

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

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

@@ -1,64 +1,21 @@
-"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 _Text = _interopRequireDefault(require("../../../core/Text"));
-var _useIsMobile = require("../../../hooks/useIsMobile");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const AppPicker = ({
-  selected,
-  small,
-  icon,
-  label,
-  lightTheme,
-  className = 'app-picker',
-  href
-}) => {
-  const theme = (0, _react2.useTheme)();
-  const isMobile = (0, _useIsMobile.useIsMobile)();
-  const fontSize = isMobile ? selected ? '14px' : '12px' : '11px';
-
-  // TODO: handle text color based on side menu
-
-  return selected || !small ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Wrapper, {
-    isLightTheme: lightTheme,
-    className: className,
-    nostyle: true,
-    small: small,
-    theme: theme,
-    selected: selected,
-    href: href,
-    selectedcolor: lightTheme ? theme.lightAppPickerActiveBackground : '#ffffff',
-    deselectedcolor: lightTheme ? theme.lightAppPickerBackground : 'rgba(255, 255, 255, 0.16)',
-    title: label,
-    trackingName: "Sidemenu",
-    trackingEvent: 'Menu click: ' + label,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.IconWrapper, {
-      className: selected ? 'selected' : '',
-      isLightTheme: lightTheme,
-      theme: theme,
-      small: small,
-      children: icon
-    }), !selected && !isMobile ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.AbsoluteText, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-        semibold: true,
-        color: !lightTheme && !selected ? 'white' : theme.lightAppPickerTextColor,
-        size: fontSize,
-        children: label
-      })
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-      semibold: true,
-      color: !lightTheme && !selected ? 'white' : !lightTheme && small ? theme.lightAppPickerActiveTextColor : small ? theme.lightMenuItemTextColor : 'black',
-      size: fontSize,
-      whiteSpace: small ? 'nowrap' : undefined,
-      children: label
-    })]
-  }) : null;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Wrapper, IconWrapper, AbsoluteText } from './styles';
+import { useTheme } from '@emotion/react';
+import Text from '../../../core/Text';
+import { useIsMobile } from '../../../hooks/useIsMobile';
+const AppPicker = ({ selected, small, icon, label, lightTheme, className = 'app-picker', href, }) => {
+    const theme = useTheme();
+    const isMobile = useIsMobile();
+    const fontSize = isMobile ? (selected ? '14px' : '12px') : '11px';
+    // TODO: handle text color based on side menu
+    return selected || !small ? (_jsxs(Wrapper, { isLightTheme: lightTheme, className: className, nostyle: true, small: small, theme: theme, selected: selected, href: href, selectedcolor: lightTheme ? theme.lightAppPickerActiveBackground : '#ffffff', deselectedcolor: lightTheme
+            ? theme.lightAppPickerBackground
+            : 'rgba(255, 255, 255, 0.16)', title: label, trackingName: "Sidemenu", trackingEvent: 'Menu click: ' + label, children: [_jsx(IconWrapper, { className: selected ? 'selected' : '', isLightTheme: lightTheme, theme: theme, small: small, children: icon }), !selected && !isMobile ? (_jsx(AbsoluteText, { children: _jsx(Text, { semibold: true, color: !lightTheme && !selected ? 'white' : theme.lightAppPickerTextColor, size: fontSize, children: label }) })) : (_jsx(Text, { semibold: true, color: !lightTheme && !selected
+                    ? 'white'
+                    : !lightTheme && small
+                        ? theme.lightAppPickerActiveTextColor
+                        : small
+                            ? theme.lightMenuItemTextColor
+                            : 'black', size: fontSize, whiteSpace: small ? 'nowrap' : undefined, children: label }))] })) : null;
 };
-var _default = exports.default = AppPicker;
+export default AppPicker;

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

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