@laerdal/life-react-components 2.1.1-dev.9.full → 2.2.1-dev.2

package/dist/Card/HorizontalCard/index.cjs

@@ -1,22 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  HorizontalCard: true
-};
-Object.defineProperty(exports, "HorizontalCard", {
-  enumerable: true,
-  get: function get() {
-    return _HorizontalCard.default;
-  }
-});
 var _types = require("./types");
 Object.keys(_types).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _types[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -25,5 +14,37 @@ Object.keys(_types).forEach(function (key) {
     }
   });
 });
-var _HorizontalCard = _interopRequireDefault(require("./HorizontalCard"));
+var _HorizontalCard = require("./HorizontalCard");
+Object.keys(_HorizontalCard).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _HorizontalCard[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _HorizontalCard[key];
+    }
+  });
+});
+var _HorizontalCardBody = require("./HorizontalCardBody");
+Object.keys(_HorizontalCardBody).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _HorizontalCardBody[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _HorizontalCardBody[key];
+    }
+  });
+});
+var _HorizontalCardThumbnail = require("./HorizontalCardThumbnail");
+Object.keys(_HorizontalCardThumbnail).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _HorizontalCardThumbnail[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _HorizontalCardThumbnail[key];
+    }
+  });
+});
 //# sourceMappingURL=index.cjs.map

package/dist/Card/HorizontalCard/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../../src/Card/HorizontalCard/index.ts"],"sourcesContent":["export * from './types';\n\nexport { default as HorizontalCard } from './HorizontalCard';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAEA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../../src/Card/HorizontalCard/index.ts"],"sourcesContent":["export * from './types';\nexport * from './HorizontalCard';\nexport * from './HorizontalCardBody';\nexport * from './HorizontalCardThumbnail';\n\n\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/dist/Card/HorizontalCard/index.d.ts

@@ -1,2 +1,4 @@
 export * from './types';
-export { default as HorizontalCard } from './HorizontalCard';
+export * from './HorizontalCard';
+export * from './HorizontalCardBody';
+export * from './HorizontalCardThumbnail';

package/dist/Card/HorizontalCard/index.js

@@ -1,3 +1,5 @@
 export * from './types';
-export { default as HorizontalCard } from './HorizontalCard';
+export * from './HorizontalCard';
+export * from './HorizontalCardBody';
+export * from './HorizontalCardThumbnail';
 //# sourceMappingURL=index.js.map

package/dist/Card/HorizontalCard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","HorizontalCard"],"sources":["../../../src/Card/HorizontalCard/index.ts"],"sourcesContent":["export * from './types';\n\nexport { default as HorizontalCard } from './HorizontalCard';\n"],"mappings":"AAAA,cAAc,SAAS;AAEvB,SAASA,OAAO,IAAIC,cAAc,QAAQ,kBAAkB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/Card/HorizontalCard/index.ts"],"sourcesContent":["export * from './types';\nexport * from './HorizontalCard';\nexport * from './HorizontalCardBody';\nexport * from './HorizontalCardThumbnail';\n\n\n"],"mappings":"AAAA,cAAc,SAAS;AACvB,cAAc,kBAAkB;AAChC,cAAc,sBAAsB;AACpC,cAAc,2BAA2B"}

package/dist/Card/HorizontalCard/types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.cjs","names":[],"sources":["../../../src/Card/HorizontalCard/types.ts"],"sourcesContent":["import {IconButtonProps} from '../../Button/Iconbutton';\nimport React from 'react';\nimport {ToggleButtonProps} from '../../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../../Dropdown/DropdownButtonTypes';\nimport {TagVariants} from '../../Tag';\nimport {LinearProgressProps} from '../../LinearProgress/LinearProgress';\n\nexport type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {\n  componentType: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type HorizontalCardToggleButton =\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n  & { componentType: 'toggle'; }\n\nexport type HorizontalCardDropdownButton =\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n  & {\n  componentType: 'dropdown';\n  icon: React.ReactNode;\n}\n\nexport interface HorizontalCardTag {\n  label: string;\n  icon?: React.ReactNode;\n  variant?: TagVariants;\n}\n\nexport type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>\n\nexport interface HorizontalCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {\n  variant?: 'outline' | 'elevated';\n  action?: () => void;\n  disabled?: boolean;\n  title: string;\n  description?: string;\n  icon?: React.ReactElement;\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\n  tags?: HorizontalCardTag[];\n  progress?: HorizontalCardLinearProgression;\n  actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton)[];\n}\n"],"mappings":""}
+{"version":3,"file":"types.cjs","names":[],"sources":["../../../src/Card/HorizontalCard/types.ts"],"sourcesContent":["import {IconButtonProps} from '../../Button/Iconbutton';\nimport React from 'react';\nimport {ToggleButtonProps} from '../../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../../Dropdown/DropdownButtonTypes';\nimport {TagVariants} from '../../Tag';\nimport {LinearProgressProps} from '../../LinearProgress/LinearProgress';\nimport { Testable } from 'src/types';\n\nexport type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {\n  componentType: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type HorizontalCardToggleButton =\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n  & { componentType: 'toggle'; }\n\nexport type HorizontalCardDropdownButton =\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n  & {\n  componentType: 'dropdown';\n  icon: React.ReactNode;\n}\n\nexport interface HorizontalCardTag {\n  label: string;\n  icon?: React.ReactNode;\n  variant?: TagVariants;\n}\n\nexport type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>\n\nexport interface HorizontalCardProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {\n  variant?: 'outline' | 'elevated';\n  action?: () => void;\n  disabled?: boolean;\n  title: string;\n  description?: string;\n  icon?: React.ReactElement;\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\n  tags?: HorizontalCardTag[];\n  progress?: HorizontalCardLinearProgression;\n  actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton)[];\n}\n"],"mappings":""}

package/dist/Card/HorizontalCard/types.d.ts

@@ -4,6 +4,7 @@ import { ToggleButtonProps } from '../../Toggles/ToggleButton';
 import { DropdownButtonProps } from '../../Dropdown/DropdownButtonTypes';
 import { TagVariants } from '../../Tag';
 import { LinearProgressProps } from '../../LinearProgress/LinearProgress';
+import { Testable } from 'src/types';
 export type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {
     componentType: 'icon';
     icon: React.ReactNode;
@@ -21,7 +22,7 @@ export interface HorizontalCardTag {
     variant?: TagVariants;
 }
 export type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>;
-export interface HorizontalCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {
+export interface HorizontalCardProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {
     variant?: 'outline' | 'elevated';
     action?: () => void;
     disabled?: boolean;

package/dist/Card/HorizontalCard/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/Card/HorizontalCard/types.ts"],"sourcesContent":["import {IconButtonProps} from '../../Button/Iconbutton';\nimport React from 'react';\nimport {ToggleButtonProps} from '../../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../../Dropdown/DropdownButtonTypes';\nimport {TagVariants} from '../../Tag';\nimport {LinearProgressProps} from '../../LinearProgress/LinearProgress';\n\nexport type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {\n  componentType: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type HorizontalCardToggleButton =\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n  & { componentType: 'toggle'; }\n\nexport type HorizontalCardDropdownButton =\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n  & {\n  componentType: 'dropdown';\n  icon: React.ReactNode;\n}\n\nexport interface HorizontalCardTag {\n  label: string;\n  icon?: React.ReactNode;\n  variant?: TagVariants;\n}\n\nexport type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>\n\nexport interface HorizontalCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {\n  variant?: 'outline' | 'elevated';\n  action?: () => void;\n  disabled?: boolean;\n  title: string;\n  description?: string;\n  icon?: React.ReactElement;\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\n  tags?: HorizontalCardTag[];\n  progress?: HorizontalCardLinearProgression;\n  actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton)[];\n}\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/Card/HorizontalCard/types.ts"],"sourcesContent":["import {IconButtonProps} from '../../Button/Iconbutton';\nimport React from 'react';\nimport {ToggleButtonProps} from '../../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../../Dropdown/DropdownButtonTypes';\nimport {TagVariants} from '../../Tag';\nimport {LinearProgressProps} from '../../LinearProgress/LinearProgress';\nimport { Testable } from 'src/types';\n\nexport type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {\n  componentType: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type HorizontalCardToggleButton =\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n  & { componentType: 'toggle'; }\n\nexport type HorizontalCardDropdownButton =\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n  & {\n  componentType: 'dropdown';\n  icon: React.ReactNode;\n}\n\nexport interface HorizontalCardTag {\n  label: string;\n  icon?: React.ReactNode;\n  variant?: TagVariants;\n}\n\nexport type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>\n\nexport interface HorizontalCardProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {\n  variant?: 'outline' | 'elevated';\n  action?: () => void;\n  disabled?: boolean;\n  title: string;\n  description?: string;\n  icon?: React.ReactElement;\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\n  tags?: HorizontalCardTag[];\n  progress?: HorizontalCardLinearProgression;\n  actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton)[];\n}\n"],"mappings":""}

package/dist/Dropdown/BasicDropdown.js

@@ -16,9 +16,9 @@ import { AutofilledMessage, ErrorMessage } from '../InputFields/styling';
 import { Size } from '../types';
 import { defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef } from '../common';
 import { useFocusOutsideRef } from '../common';
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var id = props.id,
     list = props.list,

package/dist/Dropdown/DropdownContent.cjs

@@ -23,7 +23,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var MAX_MENU_HEIGHT = 240;
 var AVG_OPTION_HEIGHT = 48;
 var OFFSET_BEFORE_SHOW = 1000000;

package/dist/Dropdown/DropdownContent.js

@@ -5,7 +5,7 @@ import _pt from "prop-types";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 import React from 'react';
 import styled from 'styled-components';
 import Button from '../Button/Button';

package/dist/Footer/Components/FooterNewsletterAndSocialSection.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FooterNewsletterAndSocialSection.cjs","names":["NewsletterAndSocial","styled","section","BREAKPOINTS","MEDIUM","NewsletterEmailSection","div","ComponentXXSStyling","ComponentTextStyle","Regular","COLORS","white","NewsletterEmail","InputFieldStyling","invertedFocusStyles","NewsletterButton","button","ComponentLStyling","Bold","SocialMedia","ComponentXSStyling","SocialMediaButtons","neutral_600","primary_800","primary_100","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","React","useState","emailInput","setEmailInput","value","e","target"],"sources":["../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../../styles';\nimport {TextField} from '../../InputFields';\nimport {Facebook, Twitter, Youtube} from '../../icons/systemicons/SystemIcons';\nimport {IconButton} from '../../Button';\nimport {\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../../styles/typography';\nimport {InputFieldStyling} from '../../InputFields/styling';\n\nconst NewsletterAndSocial = styled.section`\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    flex-direction: row;\n  }\n`;\n\nconst NewsletterEmailSection = styled.div`\n  width: 100%;\n  margin: 16px auto 0 auto;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 60%;\n    margin: 16px 0 0 0;\n  }\n\n  label {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white)}\n    margin-bottom: 2px;\n  }\n  div div {\n    width: 100%;\n    ${BREAKPOINTS.MEDIUM} {\n      width: calc(100% - 82px);\n      width: 288px;\n    }\n  }\n  input {\n    height: 48px;\n  }\n`;\n\nconst NewsletterEmail = styled.div`\n  display: flex;\n  flex-direction: column;\n  margin: 2px auto 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n\n  ${InputFieldStyling} {\n    &.focus-visible {\n      ${invertedFocusStyles}\n    }\n  }\n`;\n\nconst NewsletterButton = styled.button`\n  background: transparent;\n  width: 100%;\n  height: 40px;\n  border: 2px solid ${COLORS.white};\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  \n  &:focus {\n    ${invertedFocusStyles}\n  }\n`;\n\nconst SocialMedia = styled.div`\n  color: ${COLORS.white};\n  margin: 0 auto;\n\n  button div {\n    box-sizing: border-box;\n    border-radius: 4px;\n  }\n\n  h4 {\n    margin-top: 16px;\n    margin-bottom: 8px;\n    \n    ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n`;\n\nconst SocialMediaButtons = styled.div`\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ${COLORS.white};\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ${COLORS.white};\n      path {\n        fill: ${COLORS.white};\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_600};\n    }\n    &:active {\n      background-color: ${COLORS.primary_800};\n      color: ${COLORS.primary_100};\n    }\n  }\n  a {\n    &:focus {\n      ${invertedFocusStyles}\n    }\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    justify-content: flex-end;\n  }\n`;\n\ninterface FooterNewsletterAndSocialSection {\n  actionOnNewsletterSignup?: (email: string) => void;\n  newsletterLabel: string;\n  placeholderEmail?: string;\n}\n\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\n  const [emailInput, setEmailInput] = React.useState<string>('');\n  return (\n    <NewsletterAndSocial>\n      <NewsletterEmailSection>\n        <label>{newsletterLabel}</label>\n        <NewsletterEmail>\n          <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\n          <NewsletterButton data-testid={'newsBtn'} onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\n        </NewsletterEmail>\n      </NewsletterEmailSection>\n      <SocialMedia>\n        <h4>Follow us on social media</h4>\n        <SocialMediaButtons>\n          <a href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Facebook />\n            </IconButton>\n          </a>\n          <a href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Twitter />\n            </IconButton>\n          </a>\n          <a href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Youtube />\n            </IconButton>\n          </a>\n        </SocialMediaButtons>\n      </SocialMedia>\n    </NewsletterAndSocial>\n  );\n};\n\nexport default FooterNewsletterAndSocialSection;\n"],"mappings":"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"}
+{"version":3,"file":"FooterNewsletterAndSocialSection.cjs","names":["NewsletterAndSocial","styled","section","BREAKPOINTS","MEDIUM","NewsletterEmailSection","div","ComponentXXSStyling","ComponentTextStyle","Regular","COLORS","white","NewsletterEmail","InputFieldStyling","invertedFocusStyles","NewsletterButton","button","ComponentLStyling","Bold","SocialMedia","ComponentXSStyling","SocialMediaButtons","neutral_600","primary_800","primary_100","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","React","useState","emailInput","setEmailInput","value","e","target"],"sources":["../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../../styles';\nimport {TextField} from '../../InputFields';\nimport {Facebook, Twitter, Youtube} from '../../icons/systemicons/SystemIcons';\nimport {IconButton} from '../../Button';\nimport {\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../../styles/typography';\nimport {InputFieldStyling} from '../../InputFields/styling';\n\nconst NewsletterAndSocial = styled.section`\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    flex-direction: row;\n  }\n`;\n\nconst NewsletterEmailSection = styled.div`\n  width: 100%;\n  margin: 16px auto 0 auto;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 60%;\n    margin: 16px 0 0 0;\n  }\n\n  label {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white)}\n    margin-bottom: 2px;\n  }\n  div div {\n    width: 100%;\n    ${BREAKPOINTS.MEDIUM} {\n      width: calc(100% - 82px);\n      width: 288px;\n    }\n  }\n  input {\n    height: 48px;\n  }\n`;\n\nconst NewsletterEmail = styled.div`\n  display: flex;\n  flex-direction: column;\n  margin: 2px auto 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n\n  ${InputFieldStyling} {\n    &.focus-visible {\n      ${invertedFocusStyles}\n    }\n  }\n`;\n\nconst NewsletterButton = styled.button`\n  background: transparent;\n  width: 100%;\n  height: 40px;\n  border: 2px solid ${COLORS.white};\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  \n  &:focus {\n    ${invertedFocusStyles}\n  }\n`;\n\nconst SocialMedia = styled.div`\n  color: ${COLORS.white};\n  margin: 0 auto;\n\n  button div {\n    box-sizing: border-box;\n    border-radius: 4px;\n  }\n\n  h4 {\n    margin-top: 16px;\n    margin-bottom: 8px;\n    \n    ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n`;\n\nconst SocialMediaButtons = styled.div`\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ${COLORS.white};\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ${COLORS.white};\n      path {\n        fill: ${COLORS.white};\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_600};\n    }\n    &:active {\n      background-color: ${COLORS.primary_800};\n      color: ${COLORS.primary_100};\n    }\n  }\n  a {\n    &:focus {\n      ${invertedFocusStyles}\n    }\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    justify-content: flex-end;\n  }\n`;\n\ninterface FooterNewsletterAndSocialSection {\n  actionOnNewsletterSignup?: (email: string) => void;\n  newsletterLabel: string;\n  placeholderEmail?: string;\n}\n\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\n  const [emailInput, setEmailInput] = React.useState<string>('');\n  return (\n    <NewsletterAndSocial>\n      <NewsletterEmailSection>\n        <label>{newsletterLabel}</label>\n        <NewsletterEmail>\n          <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\n          <NewsletterButton data-testid={'newsBtn'} onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\n        </NewsletterEmail>\n      </NewsletterEmailSection>\n      <SocialMedia>\n        <h4>Follow us on social media</h4>\n        <SocialMediaButtons>\n          <a href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Facebook />\n            </IconButton>\n          </a>\n          <a href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Twitter />\n            </IconButton>\n          </a>\n          <a href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Youtube />\n            </IconButton>\n          </a>\n        </SocialMediaButtons>\n      </SocialMedia>\n    </NewsletterAndSocial>\n  );\n};\n\nexport default FooterNewsletterAndSocialSection;\n"],"mappings":"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"}

package/dist/Footer/Components/FooterNewsletterAndSocialSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"FooterNewsletterAndSocialSection.js","names":["React","styled","BREAKPOINTS","COLORS","invertedFocusStyles","TextField","Facebook","Twitter","Youtube","IconButton","ComponentLStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","InputFieldStyling","NewsletterAndSocial","section","MEDIUM","NewsletterEmailSection","div","Regular","white","NewsletterEmail","NewsletterButton","button","Bold","SocialMedia","SocialMediaButtons","neutral_600","primary_800","primary_100","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","useState","emailInput","setEmailInput","value","e","target"],"sources":["../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../../styles';\nimport {TextField} from '../../InputFields';\nimport {Facebook, Twitter, Youtube} from '../../icons/systemicons/SystemIcons';\nimport {IconButton} from '../../Button';\nimport {\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../../styles/typography';\nimport {InputFieldStyling} from '../../InputFields/styling';\n\nconst NewsletterAndSocial = styled.section`\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    flex-direction: row;\n  }\n`;\n\nconst NewsletterEmailSection = styled.div`\n  width: 100%;\n  margin: 16px auto 0 auto;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 60%;\n    margin: 16px 0 0 0;\n  }\n\n  label {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white)}\n    margin-bottom: 2px;\n  }\n  div div {\n    width: 100%;\n    ${BREAKPOINTS.MEDIUM} {\n      width: calc(100% - 82px);\n      width: 288px;\n    }\n  }\n  input {\n    height: 48px;\n  }\n`;\n\nconst NewsletterEmail = styled.div`\n  display: flex;\n  flex-direction: column;\n  margin: 2px auto 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n\n  ${InputFieldStyling} {\n    &.focus-visible {\n      ${invertedFocusStyles}\n    }\n  }\n`;\n\nconst NewsletterButton = styled.button`\n  background: transparent;\n  width: 100%;\n  height: 40px;\n  border: 2px solid ${COLORS.white};\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  \n  &:focus {\n    ${invertedFocusStyles}\n  }\n`;\n\nconst SocialMedia = styled.div`\n  color: ${COLORS.white};\n  margin: 0 auto;\n\n  button div {\n    box-sizing: border-box;\n    border-radius: 4px;\n  }\n\n  h4 {\n    margin-top: 16px;\n    margin-bottom: 8px;\n    \n    ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n`;\n\nconst SocialMediaButtons = styled.div`\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ${COLORS.white};\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ${COLORS.white};\n      path {\n        fill: ${COLORS.white};\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_600};\n    }\n    &:active {\n      background-color: ${COLORS.primary_800};\n      color: ${COLORS.primary_100};\n    }\n  }\n  a {\n    &:focus {\n      ${invertedFocusStyles}\n    }\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    justify-content: flex-end;\n  }\n`;\n\ninterface FooterNewsletterAndSocialSection {\n  actionOnNewsletterSignup?: (email: string) => void;\n  newsletterLabel: string;\n  placeholderEmail?: string;\n}\n\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\n  const [emailInput, setEmailInput] = React.useState<string>('');\n  return (\n    <NewsletterAndSocial>\n      <NewsletterEmailSection>\n        <label>{newsletterLabel}</label>\n        <NewsletterEmail>\n          <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\n          <NewsletterButton data-testid={'newsBtn'} onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\n        </NewsletterEmail>\n      </NewsletterEmailSection>\n      <SocialMedia>\n        <h4>Follow us on social media</h4>\n        <SocialMediaButtons>\n          <a href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Facebook />\n            </IconButton>\n          </a>\n          <a href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Twitter />\n            </IconButton>\n          </a>\n          <a href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Youtube />\n            </IconButton>\n          </a>\n        </SocialMediaButtons>\n      </SocialMedia>\n    </NewsletterAndSocial>\n  );\n};\n\nexport default FooterNewsletterAndSocialSection;\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,SAAQC,WAAW,EAAEC,MAAM,EAAeC,mBAAmB,QAAO,cAAc;AAClF,SAAQC,SAAS,QAAO,mBAAmB;AAC3C,SAAQC,QAAQ,EAAEC,OAAO,EAAEC,OAAO,QAAO,qCAAqC;AAC9E,SAAQC,UAAU,QAAO,cAAc;AACvC,SACEC,iBAAiB,EAEjBC,kBAAkB,EAClBC,kBAAkB,EAClBC,mBAAmB,QACd,yBAAyB;AAChC,SAAQC,iBAAiB,QAAO,2BAA2B;AAAC;AAAA;AAE5D,IAAMC,mBAAmB,GAAGd,MAAM,CAACe,OAAO,wLAKtCd,WAAW,CAACe,MAAM,CAGrB;AAED,IAAMC,sBAAsB,GAAGjB,MAAM,CAACkB,GAAG,uXAIrCjB,WAAW,CAACe,MAAM,EAMhBJ,mBAAmB,CAACF,kBAAkB,CAACS,OAAO,EAAEjB,MAAM,CAACkB,KAAK,CAAC,EAK7DnB,WAAW,CAACe,MAAM,CAQvB;AAED,IAAMK,eAAe,GAAGrB,MAAM,CAACkB,GAAG,4QAK9BjB,WAAW,CAACe,MAAM,EAKlBH,iBAAiB,EAEbV,mBAAmB,CAG1B;AAED,IAAMmB,gBAAgB,GAAGtB,MAAM,CAACuB,MAAM,gYAIhBrB,MAAM,CAACkB,KAAK,EAK9BX,iBAAiB,CAACC,kBAAkB,CAACc,IAAI,EAAEtB,MAAM,CAACkB,KAAK,CAAC,EAExDnB,WAAW,CAACe,MAAM,EAUhBb,mBAAmB,CAExB;AAED,IAAMsB,WAAW,GAAGzB,MAAM,CAACkB,GAAG,mWACnBhB,MAAM,CAACkB,KAAK,EAYjBT,kBAAkB,CAACD,kBAAkB,CAACS,OAAO,EAAE,SAAS,CAAC,EAG3DlB,WAAW,CAACe,MAAM,CAMrB;AAED,IAAMU,kBAAkB,GAAG1B,MAAM,CAACkB,GAAG,umBAOxBhB,MAAM,CAACkB,KAAK,EAIXlB,MAAM,CAACkB,KAAK,EAEVlB,MAAM,CAACkB,KAAK,EAQFlB,MAAM,CAACkB,KAAK,EACvBlB,MAAM,CAACyB,WAAW,EAGPzB,MAAM,CAAC0B,WAAW,EAC7B1B,MAAM,CAAC2B,WAAW,EAKzB1B,mBAAmB,EAIvBF,WAAW,CAACe,MAAM,CAGrB;AAQD,IAAMc,gCAAgC,GAAG,SAAnCA,gCAAgC,OAA0G;EAAA,IAApGC,wBAAwB,QAAxBA,wBAAwB;IAAEC,eAAe,QAAfA,eAAe;IAAEC,gBAAgB,QAAhBA,gBAAgB;EACrG,sBAAoClC,KAAK,CAACmC,QAAQ,CAAS,EAAE,CAAC;IAAA;IAAvDC,UAAU;IAAEC,aAAa;EAChC,oBACE,MAAC,mBAAmB;IAAA,wBAClB,MAAC,sBAAsB;MAAA,wBACrB;QAAA,UAAQJ;MAAe,EAAS,eAChC,MAAC,eAAe;QAAA,wBACd,KAAC,SAAS;UAAC,EAAE,EAAC,iBAAiB;UAAC,aAAa,EAAE,IAAK;UAAC,WAAW,EAAEC,gBAAiB;UAAC,KAAK,EAAEE,UAAW;UAAC,QAAQ,EAAE,kBAACE,KAAa;YAAA,OAAKD,aAAa,CAACC,KAAK,CAAC;UAAA;QAAC,EAAG,eAC5J,KAAC,gBAAgB;UAAC,eAAa,SAAU;UAAC,OAAO,EAAE,iBAACC,CAAM;YAAA,OAAKP,wBAAwB,IAAIA,wBAAwB,CAACO,CAAC,CAACC,MAAM,CAACF,KAAK,CAAC;UAAA,CAAC;UAAA;QAAA,EAA2B;MAAA,EAC/I;IAAA,EACK,eACzB,MAAC,WAAW;MAAA,wBACV;QAAA;MAAA,EAAkC,eAClC,MAAC,kBAAkB;QAAA,wBACjB;UAAG,IAAI,EAAC,0CAA0C;UAAC,MAAM,EAAC,QAAQ;UAAC,GAAG,EAAC,qBAAqB;UAAA,uBAC1F,KAAC,UAAU;YAAC,OAAO,EAAC,WAAW;YAAC,MAAM,EAAE,kBAAM,CAAC,CAAE;YAAC,QAAQ,EAAE,CAAC,CAAE;YAAA,uBAC7D,KAAC,QAAQ;UAAG;QACD,EACX,eACJ;UAAG,IAAI,EAAC,oCAAoC;UAAC,MAAM,EAAC,QAAQ;UAAC,GAAG,EAAC,qBAAqB;UAAA,uBACpF,KAAC,UAAU;YAAC,OAAO,EAAC,WAAW;YAAC,MAAM,EAAE,kBAAM,CAAC,CAAE;YAAC,QAAQ,EAAE,CAAC,CAAE;YAAA,uBAC7D,KAAC,OAAO;UAAG;QACA,EACX,eACJ;UAAG,IAAI,EAAC,6CAA6C;UAAC,MAAM,EAAC,QAAQ;UAAC,GAAG,EAAC,qBAAqB;UAAA,uBAC7F,KAAC,UAAU;YAAC,OAAO,EAAC,WAAW;YAAC,MAAM,EAAE,kBAAM,CAAC,CAAE;YAAC,QAAQ,EAAE,CAAC,CAAE;YAAA,uBAC7D,KAAC,OAAO;UAAG;QACA,EACX;MAAA,EACe;IAAA,EACT;EAAA,EACM;AAE1B,CAAC;AAAC;EAtCAN,wBAAwB;EACxBC,eAAe;EACfC,gBAAgB;AAAA;AAsClB,eAAeH,gCAAgC"}
+{"version":3,"file":"FooterNewsletterAndSocialSection.js","names":["React","styled","BREAKPOINTS","COLORS","invertedFocusStyles","TextField","Facebook","Twitter","Youtube","IconButton","ComponentLStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","InputFieldStyling","NewsletterAndSocial","section","MEDIUM","NewsletterEmailSection","div","Regular","white","NewsletterEmail","NewsletterButton","button","Bold","SocialMedia","SocialMediaButtons","neutral_600","primary_800","primary_100","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","useState","emailInput","setEmailInput","value","e","target"],"sources":["../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../../styles';\nimport {TextField} from '../../InputFields';\nimport {Facebook, Twitter, Youtube} from '../../icons/systemicons/SystemIcons';\nimport {IconButton} from '../../Button';\nimport {\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../../styles/typography';\nimport {InputFieldStyling} from '../../InputFields/styling';\n\nconst NewsletterAndSocial = styled.section`\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    flex-direction: row;\n  }\n`;\n\nconst NewsletterEmailSection = styled.div`\n  width: 100%;\n  margin: 16px auto 0 auto;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 60%;\n    margin: 16px 0 0 0;\n  }\n\n  label {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.white)}\n    margin-bottom: 2px;\n  }\n  div div {\n    width: 100%;\n    ${BREAKPOINTS.MEDIUM} {\n      width: calc(100% - 82px);\n      width: 288px;\n    }\n  }\n  input {\n    height: 48px;\n  }\n`;\n\nconst NewsletterEmail = styled.div`\n  display: flex;\n  flex-direction: column;\n  margin: 2px auto 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n\n  ${InputFieldStyling} {\n    &.focus-visible {\n      ${invertedFocusStyles}\n    }\n  }\n`;\n\nconst NewsletterButton = styled.button`\n  background: transparent;\n  width: 100%;\n  height: 40px;\n  border: 2px solid ${COLORS.white};\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.white)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n  \n  &:focus {\n    ${invertedFocusStyles}\n  }\n`;\n\nconst SocialMedia = styled.div`\n  color: ${COLORS.white};\n  margin: 0 auto;\n\n  button div {\n    box-sizing: border-box;\n    border-radius: 4px;\n  }\n\n  h4 {\n    margin-top: 16px;\n    margin-bottom: 8px;\n    \n    ${ComponentXSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n`;\n\nconst SocialMediaButtons = styled.div`\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ${COLORS.white};\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ${COLORS.white};\n      path {\n        fill: ${COLORS.white};\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_600};\n    }\n    &:active {\n      background-color: ${COLORS.primary_800};\n      color: ${COLORS.primary_100};\n    }\n  }\n  a {\n    &:focus {\n      ${invertedFocusStyles}\n    }\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    justify-content: flex-end;\n  }\n`;\n\ninterface FooterNewsletterAndSocialSection {\n  actionOnNewsletterSignup?: (email: string) => void;\n  newsletterLabel: string;\n  placeholderEmail?: string;\n}\n\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\n  const [emailInput, setEmailInput] = React.useState<string>('');\n  return (\n    <NewsletterAndSocial>\n      <NewsletterEmailSection>\n        <label>{newsletterLabel}</label>\n        <NewsletterEmail>\n          <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\n          <NewsletterButton data-testid={'newsBtn'} onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\n        </NewsletterEmail>\n      </NewsletterEmailSection>\n      <SocialMedia>\n        <h4>Follow us on social media</h4>\n        <SocialMediaButtons>\n          <a href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Facebook />\n            </IconButton>\n          </a>\n          <a href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Twitter />\n            </IconButton>\n          </a>\n          <a href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Youtube />\n            </IconButton>\n          </a>\n        </SocialMediaButtons>\n      </SocialMedia>\n    </NewsletterAndSocial>\n  );\n};\n\nexport default FooterNewsletterAndSocialSection;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/GlobalNavigationBar.js

@@ -22,9 +22,9 @@ import DesktopActions from './desktop/DesktopActions';
 import { usePreviousImmediate } from 'rooks';
 import { useClickOutsideRef } from '../common';
 import { hasWindow } from '../utils/utils';
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 var HeaderWrapper = styled.header(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: white;\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n\n  z-index: ", ";\n  position: relative;\n\n  height: 48px;\n\n  ", " {\n    height: 56px;\n  }\n\n  ", " {\n    height: 64px;\n  }\n\n  @media all and (-ms-high-contrast: none) {\n    height: auto;\n  }\n\n  @media print {\n    border-bottom: none;\n  }\n"])), COLORS.neutral_200, Z_INDEXES.sticky_menu, BREAKPOINTS.SMALL, BREAKPOINTS.LARGE);
 var RowLayout = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
 var HamburgerButton = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " button {\n    height: 56px;\n  }\n\n  ", " {\n    display: none;\n  }\n"])), BREAKPOINTS.SMALL, BREAKPOINTS.LARGE);

package/dist/GlobalNavigationBar/Logo.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.cjs","names":["StyledLink","styled","Link","props","$color","BREAKPOINTS","MEDIUM","LogoContainer","div","LARGE","focusStyles","invertedFocusStyles","Name","span","COLORS","black","SMALL","noSizeChangeOnMobile","ComponentMStyling","ComponentTextStyle","Regular","ComponentXSStyling","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","inverted","defaultOnMouseDownHandler"],"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.$color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  max-width: calc(100% - 48px);\n  overflow: hidden;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.LARGE} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    ${focusStyles}\n  }\n\n  &.inverted:focus-within {\n    ${invertedFocusStyles}\n  }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\n  letter-spacing: -0.02em;\n  max-width: 168px;\n  ${BREAKPOINTS.SMALL} {\n    max-width: 200px;\n  }\n  \n  white-space: nowrap;\n  overflow: hidden;\n\n  ${(props) =>\n    props.noSizeChangeOnMobile\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    margin-left: 12px;\n    padding-left: 12px;\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n  inverted?: boolean;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer className={inverted ? 'inverted' : ''}>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={defaultOnMouseDownHandler}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        $color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AAAoD;AAAA;AAAA;AAAA;AAEpD,IAAMA,UAAU,GAAG,IAAAC,yBAAM,EAACC,oBAAI,CAAC,+VAWlB,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM;AAAA,GAC9BC,mBAAW,CAACC,MAAM,CAKvB;AAED,IAAMC,aAAa,GAAGN,yBAAM,CAACO,GAAG,kaAU5BH,mBAAW,CAACI,KAAK,EAMfC,mBAAW,EAIXC,2BAAmB,CAExB;AAED,IAAMC,IAAI,GAAGX,yBAAM,CAACY,IAAI,sdAGG,UAACV,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK;AAAA,GAG9DV,mBAAW,CAACW,KAAK,EAOjB,UAACb,KAAK;EAAA,OACNA,KAAK,CAACc,oBAAoB,GACtB,IAAAC,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEjB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC,GAC3E,IAAAM,0BAAkB,EAACF,0BAAkB,CAACC,OAAO,EAAEjB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC;AAAA,GAKhFV,mBAAW,CAACC,MAAM,EAChB,UAACH,KAAK;EAAA,OAAK,IAAAe,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEjB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC;AAAA,GAGxFV,mBAAW,CAACI,KAAK,CAIpB;AAED,IAAMa,OAAO,GAAGrB,yBAAM,CAACY,IAAI,wOACL,UAACV,KAAK;EAAA,OAAKA,KAAK,CAACoB,eAAe,IAAIT,cAAM,CAACU,WAAW;AAAA,GAOxE,UAACrB,KAAK;EAAA,OAAK,IAAAkB,0BAAkB,EAACF,0BAAkB,CAACM,aAAa,EAAEtB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACY,KAAK,CAAC;AAAA,EAChG;AAcD,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAAkK;EAAA,IAA5JC,IAAI,QAAJA,IAAI;IAAEC,WAAW,QAAXA,WAAW;IAAEC,QAAO,QAAPA,OAAO;IAAEC,EAAE,QAAFA,EAAE;IAAEC,KAAK,QAALA,KAAK;IAAEf,oBAAoB,QAApBA,oBAAoB;IAAEgB,sBAAsB,QAAtBA,sBAAsB;IAAEC,YAAY,QAAZA,YAAY;IAAEC,QAAQ,QAARA,QAAQ;EACzH,oBACE,qBAAC,aAAa;IAAC,SAAS,EAAEA,QAAQ,GAAG,UAAU,GAAG,EAAG;IAAA,uBACnD,sBAAC,UAAU;MACT,EAAE,EAAEJ,EAAE,IAAI,GAAI;MACd,WAAW,EAAEK,iCAA0B;MACvC,OAAO,EAAE,mBAAM;QACb,IAAIN,QAAO,EAAE;UACXA,QAAO,EAAE;QACX;MACF,CAAE;MACF,MAAM,EAAEE,KAAM;MAAA,WACbA,KAAK,KAAKlB,cAAM,CAACY,KAAK,gBAAG,qBAAC,wBAAgB,KAAG,gBAAG,qBAAC,mBAAW,KAAG,eAChE,qBAAC,IAAI;QAAC,MAAM,EAAEM,KAAM;QAAC,oBAAoB,EAAEf,oBAAoB,IAAI,KAAM;QAAA,UACtEW;MAAI,EACA,EACNC,WAAW,iBACV,qBAAC,OAAO;QAAC,eAAe,EAAEI,sBAAuB;QAAC,MAAM,EAAEC,YAAa;QAAA;MAAA,EAGxE;IAAA;EACU,EACC;AAEpB,CAAC;AAAC;EAnCAN,IAAI;EACJC,WAAW;EACXC,OAAO;EACPC,EAAE;EACFC,KAAK;EACLf,oBAAoB;EACpBgB,sBAAsB;EACtBC,YAAY;EACZC,QAAQ;AAAA;AAAA,eA6BKR,IAAI;AAAA"}
+{"version":3,"file":"Logo.cjs","names":["StyledLink","styled","Link","props","$color","BREAKPOINTS","MEDIUM","LogoContainer","div","LARGE","focusStyles","invertedFocusStyles","Name","span","COLORS","black","SMALL","noSizeChangeOnMobile","ComponentMStyling","ComponentTextStyle","Regular","ComponentXSStyling","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","inverted","defaultOnMouseDownHandler"],"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.$color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  max-width: calc(100% - 48px);\n  overflow: hidden;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.LARGE} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    ${focusStyles}\n  }\n\n  &.inverted:focus-within {\n    ${invertedFocusStyles}\n  }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\n  letter-spacing: -0.02em;\n  max-width: 168px;\n  ${BREAKPOINTS.SMALL} {\n    max-width: 200px;\n  }\n  \n  white-space: nowrap;\n  overflow: hidden;\n\n  ${(props) =>\n    props.noSizeChangeOnMobile\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    margin-left: 12px;\n    padding-left: 12px;\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n  inverted?: boolean;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer className={inverted ? 'inverted' : ''}>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={defaultOnMouseDownHandler}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        $color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AAAoD;AAAA;AAAA;AAAA;AAEpD,IAAMA,UAAU,GAAG,IAAAC,yBAAM,EAACC,oBAAI,CAAC,+VAWlB,UAACC,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM;AAAA,GAC9BC,mBAAW,CAACC,MAAM,CAKvB;AAED,IAAMC,aAAa,GAAGN,yBAAM,CAACO,GAAG,kaAU5BH,mBAAW,CAACI,KAAK,EAMfC,mBAAW,EAIXC,2BAAmB,CAExB;AAED,IAAMC,IAAI,GAAGX,yBAAM,CAACY,IAAI,sdAGG,UAACV,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK;AAAA,GAG9DV,mBAAW,CAACW,KAAK,EAOjB,UAACb,KAAK;EAAA,OACNA,KAAK,CAACc,oBAAoB,GACtB,IAAAC,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEjB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC,GAC3E,IAAAM,0BAAkB,EAACF,0BAAkB,CAACC,OAAO,EAAEjB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC;AAAA,GAKhFV,mBAAW,CAACC,MAAM,EAChB,UAACH,KAAK;EAAA,OAAK,IAAAe,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEjB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACC,KAAK,CAAC;AAAA,GAGxFV,mBAAW,CAACI,KAAK,CAIpB;AAED,IAAMa,OAAO,GAAGrB,yBAAM,CAACY,IAAI,wOACL,UAACV,KAAK;EAAA,OAAKA,KAAK,CAACoB,eAAe,IAAIT,cAAM,CAACU,WAAW;AAAA,GAOxE,UAACrB,KAAK;EAAA,OAAK,IAAAkB,0BAAkB,EAACF,0BAAkB,CAACM,aAAa,EAAEtB,KAAK,CAACC,MAAM,IAAIU,cAAM,CAACY,KAAK,CAAC;AAAA,EAChG;AAcD,IAAMC,IAAI,GAAG,SAAPA,IAAI,OAAkK;EAAA,IAA5JC,IAAI,QAAJA,IAAI;IAAEC,WAAW,QAAXA,WAAW;IAAEC,QAAO,QAAPA,OAAO;IAAEC,EAAE,QAAFA,EAAE;IAAEC,KAAK,QAALA,KAAK;IAAEf,oBAAoB,QAApBA,oBAAoB;IAAEgB,sBAAsB,QAAtBA,sBAAsB;IAAEC,YAAY,QAAZA,YAAY;IAAEC,QAAQ,QAARA,QAAQ;EACzH,oBACE,qBAAC,aAAa;IAAC,SAAS,EAAEA,QAAQ,GAAG,UAAU,GAAG,EAAG;IAAA,uBACnD,sBAAC,UAAU;MACT,EAAE,EAAEJ,EAAE,IAAI,GAAI;MACd,WAAW,EAAEK,iCAA0B;MACvC,OAAO,EAAE,mBAAM;QACb,IAAIN,QAAO,EAAE;UACXA,QAAO,EAAE;QACX;MACF,CAAE;MACF,MAAM,EAAEE,KAAM;MAAA,WACbA,KAAK,KAAKlB,cAAM,CAACY,KAAK,gBAAG,qBAAC,wBAAgB,KAAG,gBAAG,qBAAC,mBAAW,KAAG,eAChE,qBAAC,IAAI;QAAC,MAAM,EAAEM,KAAM;QAAC,oBAAoB,EAAEf,oBAAoB,IAAI,KAAM;QAAA,UACtEW;MAAI,EACA,EACNC,WAAW,iBACV,qBAAC,OAAO;QAAC,eAAe,EAAEI,sBAAuB;QAAC,MAAM,EAAEC,YAAa;QAAA,UAAC;MAExE,EACD;IAAA;EACU,EACC;AAEpB,CAAC;AAAC;EAnCAN,IAAI;EACJC,WAAW;EACXC,OAAO;EACPC,EAAE;EACFC,KAAK;EACLf,oBAAoB;EACpBgB,sBAAsB;EACtBC,YAAY;EACZC,QAAQ;AAAA;AAAA,eA6BKR,IAAI;AAAA"}

package/dist/GlobalNavigationBar/Logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.js","names":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","invertedFocusStyles","ComponentMStyling","ComponentXSStyling","defaultOnMouseDownHandler","StyledLink","props","$color","MEDIUM","LogoContainer","div","LARGE","Name","span","black","SMALL","noSizeChangeOnMobile","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","inverted"],"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.$color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  max-width: calc(100% - 48px);\n  overflow: hidden;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.LARGE} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    ${focusStyles}\n  }\n\n  &.inverted:focus-within {\n    ${invertedFocusStyles}\n  }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\n  letter-spacing: -0.02em;\n  max-width: 168px;\n  ${BREAKPOINTS.SMALL} {\n    max-width: 200px;\n  }\n  \n  white-space: nowrap;\n  overflow: hidden;\n\n  ${(props) =>\n    props.noSizeChangeOnMobile\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    margin-left: 12px;\n    padding-left: 12px;\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n  inverted?: boolean;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer className={inverted ? 'inverted' : ''}>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={defaultOnMouseDownHandler}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        $color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"mappings":"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"}
+{"version":3,"file":"Logo.js","names":["React","Link","styled","LaerdalLogo","LaerdalWhiteLogo","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","invertedFocusStyles","ComponentMStyling","ComponentXSStyling","defaultOnMouseDownHandler","StyledLink","props","$color","MEDIUM","LogoContainer","div","LARGE","Name","span","black","SMALL","noSizeChangeOnMobile","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","inverted"],"sources":["../../src/GlobalNavigationBar/Logo.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles, invertedFocusStyles} from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.$color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  max-width: calc(100% - 48px);\n  overflow: hidden;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.LARGE} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    ${focusStyles}\n  }\n\n  &.inverted:focus-within {\n    ${invertedFocusStyles}\n  }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\n  letter-spacing: -0.02em;\n  max-width: 168px;\n  ${BREAKPOINTS.SMALL} {\n    max-width: 200px;\n  }\n  \n  white-space: nowrap;\n  overflow: hidden;\n\n  ${(props) =>\n    props.noSizeChangeOnMobile\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    margin-left: 12px;\n    padding-left: 12px;\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n  inverted?: boolean;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor, inverted }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer className={inverted ? 'inverted' : ''}>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={defaultOnMouseDownHandler}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        $color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs

@@ -21,10 +21,11 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["placement", "type", "action"],
   _excluded2 = ["placement", "type", "icon", "action"],
   _excluded3 = ["placement", "type", "action"];
-var _templateObject;
+var _templateObject, _templateObject2;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n\n  display: none;\n\n  ", " {\n    display: flex;\n  }\n"])), _styles.BREAKPOINTS.LARGE);
+var ProfileWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 8px;\n"])));
 var DesktopActions = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var buttons = _ref.buttons,
     user = _ref.user,
@@ -60,15 +61,19 @@ var DesktopActions = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
             type = item.type,
             action = item.action,
             rest = (0, _objectWithoutProperties2.default)(item, _excluded);
-          if (!!profileComponent) return profileComponent;else return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileButton.ProfileButton, _objectSpread({
-            ref: elRefs[index],
-            hideOnLowWidth: true,
-            onClick: function onClick(e) {
-              item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) : onShowUserMenu();
-            },
-            icon: !user && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.User, {}),
-            initials: ((_user$firstName$charA = user === null || user === void 0 ? void 0 : (_user$firstName = user.firstName) === null || _user$firstName === void 0 ? void 0 : _user$firstName.charAt(0)) !== null && _user$firstName$charA !== void 0 ? _user$firstName$charA : '') + ((_user$lastName$charAt = user === null || user === void 0 ? void 0 : (_user$lastName = user.lastName) === null || _user$lastName === void 0 ? void 0 : _user$lastName.charAt(0)) !== null && _user$lastName$charAt !== void 0 ? _user$lastName$charAt : '')
-          }, rest), index);
+          if (!!profileComponent) return /*#__PURE__*/(0, _jsxRuntime.jsx)(ProfileWrapper, {
+            children: profileComponent
+          });else return /*#__PURE__*/(0, _jsxRuntime.jsx)(ProfileWrapper, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProfileButton.ProfileButton, _objectSpread({
+              ref: elRefs[index],
+              hideOnLowWidth: true,
+              onClick: function onClick(e) {
+                item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) : onShowUserMenu();
+              },
+              icon: !user && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.User, {}),
+              initials: ((_user$firstName$charA = user === null || user === void 0 ? void 0 : (_user$firstName = user.firstName) === null || _user$firstName === void 0 ? void 0 : _user$firstName.charAt(0)) !== null && _user$firstName$charA !== void 0 ? _user$firstName$charA : '') + ((_user$lastName$charAt = user === null || user === void 0 ? void 0 : (_user$lastName = user.lastName) === null || _user$lastName === void 0 ? void 0 : _user$lastName.charAt(0)) !== null && _user$lastName$charAt !== void 0 ? _user$lastName$charAt : '')
+            }, rest), index)
+          });
         }
       case 'action':
         {

package/dist/GlobalNavigationBar/desktop/DesktopActions.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DesktopActions.cjs","names":["Wrapper","styled","div","BREAKPOINTS","LARGE","DesktopActions","React","forwardRef","ref","buttons","user","profileComponent","onShowUserMenu","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","r","index","type","renderItem","item","placement","action","rest","e","target","firstName","charAt","lastName","icon"],"sources":["../../../src/GlobalNavigationBar/desktop/DesktopActions.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {MenuAccountInfo, MobileMenuButtonTypes, MenuIconButton, DesktopMenuButtonTypes} from '../types';\nimport {IconButton} from '../../Button';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {ProfileButton} from '../../ProfileButton';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS} from '../../styles';\n\nconst Wrapper = styled.div`\n  align-items: center;\n\n  display: none;\n\n  ${BREAKPOINTS.LARGE} {\n    display: flex;\n  }\n`;\n\n\ninterface DesktopActionsProps {\n  buttons?: DesktopMenuButtonTypes[];\n  user?: MenuAccountInfo;\n  profileComponent?: React.ReactNode\n  onShowUserMenu: () => void;\n}\n\nexport interface DesktopActionsRef {\n  buttons?: { ref: React.MutableRefObject<HTMLButtonElement | null>, type: 'profile' | 'action' | 'switcher' | undefined }[]\n}\n\nconst  DesktopActions = React.forwardRef(({\n                                           buttons,\n                                           user,\n                                            profileComponent,\n                                           onShowUserMenu\n                                         }: DesktopActionsProps, ref: React.Ref<DesktopActionsRef>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n  const length = buttons?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => ({\n    buttons: elRefs.map((r, index) => ({\n      ref: r,\n      type: buttons?.[index]?.type,\n    }))\n  }), [elRefs, buttons]);\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile': {\n        const {placement, type, action, ...rest} = item;\n        if(!!profileComponent)\n          return profileComponent;\n        else\n          return <ProfileButton key={index}\n            ref={elRefs[index]}\n            hideOnLowWidth={true}\n            onClick={e => {\n              item.action ? item.action(e?.target) : onShowUserMenu()\n            }}\n            icon={!user && <SystemIcons.User/>}\n            initials={(user?.firstName?.charAt(0) ?? '') + (user?.lastName?.charAt(0) ?? '')}\n            {...rest}/>\n      }\n      case 'action': {\n        const {placement, type, icon, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'switcher': {\n        const {placement, type, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           id=\"globalNavAppsButton\"\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          <SwitchApp size=\"24px\"/>\n        </IconButton>\n      }\n    }\n  }\n\n  return (\n    <Wrapper>\n      {buttons?.map((item, index) => renderItem(item, index))}\n    </Wrapper>\n  )\n});\n\n\nexport default DesktopActions;\n"],"mappings":"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"}
+{"version":3,"file":"DesktopActions.cjs","names":["Wrapper","styled","div","BREAKPOINTS","LARGE","ProfileWrapper","DesktopActions","React","forwardRef","ref","buttons","user","profileComponent","onShowUserMenu","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","r","index","type","renderItem","item","placement","action","rest","e","target","firstName","charAt","lastName","icon"],"sources":["../../../src/GlobalNavigationBar/desktop/DesktopActions.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {MenuAccountInfo, MobileMenuButtonTypes, MenuIconButton, DesktopMenuButtonTypes} from '../types';\nimport {IconButton} from '../../Button';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {ProfileButton} from '../../ProfileButton';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS} from '../../styles';\n\nconst Wrapper = styled.div`\n  align-items: center;\n\n  display: none;\n\n  ${BREAKPOINTS.LARGE} {\n    display: flex;\n  }\n`;\n\nconst ProfileWrapper = styled.div`\n  margin: 0 8px;\n`;\n\n\ninterface DesktopActionsProps {\n  buttons?: DesktopMenuButtonTypes[];\n  user?: MenuAccountInfo;\n  profileComponent?: React.ReactNode\n  onShowUserMenu: () => void;\n}\n\nexport interface DesktopActionsRef {\n  buttons?: { ref: React.MutableRefObject<HTMLButtonElement | null>, type: 'profile' | 'action' | 'switcher' | undefined }[]\n}\n\nconst  DesktopActions = React.forwardRef(({\n                                           buttons,\n                                           user,\n                                            profileComponent,\n                                           onShowUserMenu\n                                         }: DesktopActionsProps, ref: React.Ref<DesktopActionsRef>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n  const length = buttons?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => ({\n    buttons: elRefs.map((r, index) => ({\n      ref: r,\n      type: buttons?.[index]?.type,\n    }))\n  }), [elRefs, buttons]);\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile': {\n        const {placement, type, action, ...rest} = item;\n        if(!!profileComponent)\n          return <ProfileWrapper>{profileComponent}</ProfileWrapper>;\n        else\n          return <ProfileWrapper>\n            <ProfileButton key={index}\n                           ref={elRefs[index]}\n                           hideOnLowWidth={true}\n                           onClick={e => {\n                             item.action ? item.action(e?.target) : onShowUserMenu()\n                           }}\n                           icon={!user && <SystemIcons.User/>}\n                           initials={(user?.firstName?.charAt(0) ?? '') + (user?.lastName?.charAt(0) ?? '')}\n                           {...rest}/>\n          </ProfileWrapper>\n      }\n      case 'action': {\n        const {placement, type, icon, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'switcher': {\n        const {placement, type, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           id=\"globalNavAppsButton\"\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          <SwitchApp size=\"24px\"/>\n        </IconButton>\n      }\n    }\n  }\n\n  return (\n    <Wrapper>\n      {buttons?.map((item, index) => renderItem(item, index))}\n    </Wrapper>\n  )\n});\n\n\nexport default DesktopActions;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/desktop/DesktopActions.js

@@ -6,7 +6,7 @@ import _pt from "prop-types";
 var _excluded = ["placement", "type", "action"],
   _excluded2 = ["placement", "type", "icon", "action"],
   _excluded3 = ["placement", "type", "action"];
-var _templateObject;
+var _templateObject, _templateObject2;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React from 'react';
@@ -18,6 +18,7 @@ import { SystemIcons } from '../../icons';
 import { BREAKPOINTS } from '../../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n\n  display: none;\n\n  ", " {\n    display: flex;\n  }\n"])), BREAKPOINTS.LARGE);
+var ProfileWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 0 8px;\n"])));
 var DesktopActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var buttons = _ref.buttons,
     user = _ref.user,
@@ -53,15 +54,19 @@ var DesktopActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             type = item.type,
             action = item.action,
             rest = _objectWithoutProperties(item, _excluded);
-          if (!!profileComponent) return profileComponent;else return /*#__PURE__*/_jsx(ProfileButton, _objectSpread({
-            ref: elRefs[index],
-            hideOnLowWidth: true,
-            onClick: function onClick(e) {
-              item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) : onShowUserMenu();
-            },
-            icon: !user && /*#__PURE__*/_jsx(SystemIcons.User, {}),
-            initials: ((_user$firstName$charA = user === null || user === void 0 ? void 0 : (_user$firstName = user.firstName) === null || _user$firstName === void 0 ? void 0 : _user$firstName.charAt(0)) !== null && _user$firstName$charA !== void 0 ? _user$firstName$charA : '') + ((_user$lastName$charAt = user === null || user === void 0 ? void 0 : (_user$lastName = user.lastName) === null || _user$lastName === void 0 ? void 0 : _user$lastName.charAt(0)) !== null && _user$lastName$charAt !== void 0 ? _user$lastName$charAt : '')
-          }, rest), index);
+          if (!!profileComponent) return /*#__PURE__*/_jsx(ProfileWrapper, {
+            children: profileComponent
+          });else return /*#__PURE__*/_jsx(ProfileWrapper, {
+            children: /*#__PURE__*/_jsx(ProfileButton, _objectSpread({
+              ref: elRefs[index],
+              hideOnLowWidth: true,
+              onClick: function onClick(e) {
+                item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) : onShowUserMenu();
+              },
+              icon: !user && /*#__PURE__*/_jsx(SystemIcons.User, {}),
+              initials: ((_user$firstName$charA = user === null || user === void 0 ? void 0 : (_user$firstName = user.firstName) === null || _user$firstName === void 0 ? void 0 : _user$firstName.charAt(0)) !== null && _user$firstName$charA !== void 0 ? _user$firstName$charA : '') + ((_user$lastName$charAt = user === null || user === void 0 ? void 0 : (_user$lastName = user.lastName) === null || _user$lastName === void 0 ? void 0 : _user$lastName.charAt(0)) !== null && _user$lastName$charAt !== void 0 ? _user$lastName$charAt : '')
+            }, rest), index)
+          });
         }
       case 'action':
         {

package/dist/GlobalNavigationBar/desktop/DesktopActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"DesktopActions.js","names":["React","styled","IconButton","SwitchApp","ProfileButton","SystemIcons","BREAKPOINTS","Wrapper","div","LARGE","DesktopActions","forwardRef","ref","buttons","user","profileComponent","onShowUserMenu","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","r","index","type","renderItem","item","placement","action","rest","e","target","firstName","charAt","lastName","icon"],"sources":["../../../src/GlobalNavigationBar/desktop/DesktopActions.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {MenuAccountInfo, MobileMenuButtonTypes, MenuIconButton, DesktopMenuButtonTypes} from '../types';\nimport {IconButton} from '../../Button';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {ProfileButton} from '../../ProfileButton';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS} from '../../styles';\n\nconst Wrapper = styled.div`\n  align-items: center;\n\n  display: none;\n\n  ${BREAKPOINTS.LARGE} {\n    display: flex;\n  }\n`;\n\n\ninterface DesktopActionsProps {\n  buttons?: DesktopMenuButtonTypes[];\n  user?: MenuAccountInfo;\n  profileComponent?: React.ReactNode\n  onShowUserMenu: () => void;\n}\n\nexport interface DesktopActionsRef {\n  buttons?: { ref: React.MutableRefObject<HTMLButtonElement | null>, type: 'profile' | 'action' | 'switcher' | undefined }[]\n}\n\nconst  DesktopActions = React.forwardRef(({\n                                           buttons,\n                                           user,\n                                            profileComponent,\n                                           onShowUserMenu\n                                         }: DesktopActionsProps, ref: React.Ref<DesktopActionsRef>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n  const length = buttons?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => ({\n    buttons: elRefs.map((r, index) => ({\n      ref: r,\n      type: buttons?.[index]?.type,\n    }))\n  }), [elRefs, buttons]);\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile': {\n        const {placement, type, action, ...rest} = item;\n        if(!!profileComponent)\n          return profileComponent;\n        else\n          return <ProfileButton key={index}\n            ref={elRefs[index]}\n            hideOnLowWidth={true}\n            onClick={e => {\n              item.action ? item.action(e?.target) : onShowUserMenu()\n            }}\n            icon={!user && <SystemIcons.User/>}\n            initials={(user?.firstName?.charAt(0) ?? '') + (user?.lastName?.charAt(0) ?? '')}\n            {...rest}/>\n      }\n      case 'action': {\n        const {placement, type, icon, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'switcher': {\n        const {placement, type, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           id=\"globalNavAppsButton\"\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          <SwitchApp size=\"24px\"/>\n        </IconButton>\n      }\n    }\n  }\n\n  return (\n    <Wrapper>\n      {buttons?.map((item, index) => renderItem(item, index))}\n    </Wrapper>\n  )\n});\n\n\nexport default DesktopActions;\n"],"mappings":"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"}
+{"version":3,"file":"DesktopActions.js","names":["React","styled","IconButton","SwitchApp","ProfileButton","SystemIcons","BREAKPOINTS","Wrapper","div","LARGE","ProfileWrapper","DesktopActions","forwardRef","ref","buttons","user","profileComponent","onShowUserMenu","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","r","index","type","renderItem","item","placement","action","rest","e","target","firstName","charAt","lastName","icon"],"sources":["../../../src/GlobalNavigationBar/desktop/DesktopActions.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport {MenuAccountInfo, MobileMenuButtonTypes, MenuIconButton, DesktopMenuButtonTypes} from '../types';\nimport {IconButton} from '../../Button';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {ProfileButton} from '../../ProfileButton';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS} from '../../styles';\n\nconst Wrapper = styled.div`\n  align-items: center;\n\n  display: none;\n\n  ${BREAKPOINTS.LARGE} {\n    display: flex;\n  }\n`;\n\nconst ProfileWrapper = styled.div`\n  margin: 0 8px;\n`;\n\n\ninterface DesktopActionsProps {\n  buttons?: DesktopMenuButtonTypes[];\n  user?: MenuAccountInfo;\n  profileComponent?: React.ReactNode\n  onShowUserMenu: () => void;\n}\n\nexport interface DesktopActionsRef {\n  buttons?: { ref: React.MutableRefObject<HTMLButtonElement | null>, type: 'profile' | 'action' | 'switcher' | undefined }[]\n}\n\nconst  DesktopActions = React.forwardRef(({\n                                           buttons,\n                                           user,\n                                            profileComponent,\n                                           onShowUserMenu\n                                         }: DesktopActionsProps, ref: React.Ref<DesktopActionsRef>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n\n  const length = buttons?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => ({\n    buttons: elRefs.map((r, index) => ({\n      ref: r,\n      type: buttons?.[index]?.type,\n    }))\n  }), [elRefs, buttons]);\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile': {\n        const {placement, type, action, ...rest} = item;\n        if(!!profileComponent)\n          return <ProfileWrapper>{profileComponent}</ProfileWrapper>;\n        else\n          return <ProfileWrapper>\n            <ProfileButton key={index}\n                           ref={elRefs[index]}\n                           hideOnLowWidth={true}\n                           onClick={e => {\n                             item.action ? item.action(e?.target) : onShowUserMenu()\n                           }}\n                           icon={!user && <SystemIcons.User/>}\n                           initials={(user?.firstName?.charAt(0) ?? '') + (user?.lastName?.charAt(0) ?? '')}\n                           {...rest}/>\n          </ProfileWrapper>\n      }\n      case 'action': {\n        const {placement, type, icon, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'switcher': {\n        const {placement, type, action, ...rest} = item;\n        return <IconButton key={index}\n                           ref={elRefs[index]}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           hideOnLowWidth={true}\n                           id=\"globalNavAppsButton\"\n                           action={e => item.action && item.action(e?.target)}\n                           {...rest}>\n          <SwitchApp size=\"24px\"/>\n        </IconButton>\n      }\n    }\n  }\n\n  return (\n    <Wrapper>\n      {buttons?.map((item, index) => renderItem(item, index))}\n    </Wrapper>\n  )\n});\n\n\nexport default DesktopActions;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/desktop/RightSideNav.cjs

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
@@ -15,12 +16,15 @@ var _NavItem = require("../../NavItem");
 var _styles = require("../../styles");
 var _Button = require("../../Button");
 var _common = require("../../common");
+var _Tooltips = require("../../Tooltips");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var NavContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n  margin: auto 0 auto auto;\n  align-items: center;\n  height: 56px;\n\n  a {\n    text-decoration: none;\n  }\n\n  ", " {\n    display: flex;\n  }\n\n  ", " {\n    height: 64px;\n  }\n\n  button,\n  div {\n    &:hover {\n      cursor: pointer;\n    }\n  }\n"])), _styles.BREAKPOINTS.MEDIUM, _styles.BREAKPOINTS.LARGE);
-var SecondaryButton = (0, _styledComponents.default)(_Button.Button)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 40px;\n  margin: 0 8px;\n\n  ", "\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, 'unset'));
+var StyledButton = (0, _styledComponents.default)(_Button.Button)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 40px;\n  margin: 0 8px;\n\n  ", "\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, 'unset'));
 var RightSideNav = function RightSideNav(_ref) {
   var items = _ref.items,
     action = _ref.action;
@@ -46,11 +50,19 @@ var RightSideNav = function RightSideNav(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(NavContainer, {
     children: [items === null || items === void 0 ? void 0 : items.reverse().map(function (no) {
       return getNavItem(no);
-    }), action && /*#__PURE__*/(0, _jsxRuntime.jsx)(SecondaryButton, {
+    }), action && !action.tooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledButton, _objectSpread(_objectSpread({
       variant: "secondary",
-      onClick: action === null || action === void 0 ? void 0 : action.action,
+      onClick: action === null || action === void 0 ? void 0 : action.action
+    }, action), {}, {
       children: action.label
-    })]
+    })), action && !!action.tooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltips.TooltipWrapper, _objectSpread(_objectSpread({}, action.tooltip), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledButton, _objectSpread(_objectSpread({
+        variant: "secondary",
+        onClick: action === null || action === void 0 ? void 0 : action.action
+      }, action), {}, {
+        children: action.label
+      }))
+    }))]
   });
 };
 RightSideNav.propTypes = {