@laerdal/life-react-components 1.11.0-dev.9 → 2.0.0-dev.1.full

package/dist/Dropdown/DropdownFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownFilter.js","names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","StyledField","Dropdown","InputField","DropdownContent","Size","AutofilledMessage","ErrorMessage","defaultOnMouseDownHandler","useActionWithin","useClickOutsideRef","useFocusOutsideRef","useFocusVisibleRef","IconButton","SystemIcons","DropdownFilter","forwardRef","ref","id","list","placeholder","onSelect","onInputChange","value","required","messageOnNoResults","disabled","readOnly","scrollable","activeValidationMessage","autofilledMessage","size","disableFiltering","buttonFontSize","margin","loading","onFocus","onBlur","rest","useState","isOpen","setIsOpen","input","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","selectedItem","setSelectedItem","selectedValues","setSelectedValues","focused","setFocused","init","setInit","styledFieldRef","inputRef","clearButtonRef","useRef","useImperativeHandle","current","containerRef","handleInputKeyDown","e","key","preventDefault","useEffect","length","val","item","find","a","displayLabel","undefined","handleInputClear","focus","focusVisible","detail","renderInput","stopPropagation","blur","Math","floor","random","target","marginLeft","Small","neutral_600","itemsType","multiSelect","action","onValueUpdate","values","items","critical_400"],"sources":["../../src/Dropdown/DropdownFilter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { StyledField, Dropdown, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { Size } from '../types';\nimport { AutofilledMessage, ErrorMessage } from '../InputFields';\nimport { defaultOnMouseDownHandler, useActionWithin, useClickOutsideRef, useFocusOutsideRef, useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\n\ninterface DropdownFilterProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onSelect' | 'size' | 'list' | 'autoComplete' | 'type' | 'placeholder' | 'onKeyDown' | 'value' | 'onChange' | 'required' | 'tabIndex' | 'disabled' | 'readOnly'> {\n  list: DropdownItem[];\n  placeholder?: string;\n\n  value?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n\n  required?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  loading?: boolean;\n\n  disableFiltering?: boolean;\n\n  messageOnNoResults?: string;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n\n  buttonFontSize?: string;\n  margin?: string;\n  scrollable?: boolean;\n}\n\nconst DropdownFilter = React.forwardRef( ({\n                                            id,\n                                            list,\n                                            placeholder,\n                                            onSelect,\n                                            onInputChange,\n                                            value,\n                                            required,\n                                            messageOnNoResults,\n                                            disabled,\n                                            readOnly,\n                                            scrollable,\n                                            activeValidationMessage,\n                                            autofilledMessage,\n                                            size,\n                                            disableFiltering,\n                                            buttonFontSize,\n                                            margin = '4px 0',\n                                            loading,\n                                            onFocus,\n                                            onBlur,\n                                            ...rest\n                                          }: DropdownFilterProps, ref) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>();\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedItem, setSelectedItem] = React.useState<DropdownItem>();\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [init, setInit] = React.useState<boolean>(true);\n\n  const styledFieldRef = useFocusVisibleRef();\n  const inputRef = useFocusVisibleRef([styledFieldRef]);\n  const clearButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  useActionWithin(styledFieldRef, input && !readOnly && !disabled ? [clearButtonRef] : []);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const containerRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [],\n    useFocusOutsideRef(() => setIsOpen(false)),\n  );\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Esc' || e.key === 'Escape') {\n      e.preventDefault();\n    }\n    if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {\n      e.preventDefault();\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    setInit(true);\n    setSelectedValues(!!value ? [value] : []);\n  }, [value]);\n\n  React.useEffect(() => {\n    if (selectedValues?.length) {\n      const val = selectedValues[0];\n      const item = list.find((a) => a.value === val);\n      setSelectedItem(item);\n      setInput(item?.displayLabel ?? item?.value ?? '');\n      onSelect && !init && onSelect(val);\n    } else {\n      setSelectedItem(undefined);\n      onSelect && !init && onSelect('');\n      setInput('');\n    }\n  }, [selectedValues]);\n\n  React.useEffect(() => {\n    if (!isOpen) {\n      if (!!selectedItem) {\n        setInput(selectedItem?.displayLabel ?? selectedItem?.value ?? '');\n      } else {\n        setInput('');\n      }\n    }\n\n    setRestartFilter(true);\n  }, [isOpen, selectedItem]);\n\n  const handleInputClear = (e: any) => {\n    setInput('');\n    setSelectedValues([]);\n    onSelect && onSelect('');\n    inputRef.current?.focus({ focusVisible: e?.detail !== 1 } as any);\n  };\n\n  const renderInput = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={size ? size : ''}\n        onClick={(e: any) => {\n          if (!readOnly && !disabled) {\n            e.stopPropagation();\n            setIsOpen(!isOpen);\n            if (isOpen) {\n              inputRef.current?.blur();\n            } else {\n              inputRef.current?.focus();\n            }\n          }\n        }}\n        disabled={disabled || false}\n        readOnly={readOnly || false}\n        isPlaceholder={!input}\n        fontSize={buttonFontSize}\n        showValidationMessage={!!activeValidationMessage}\n        onMouseDown={defaultOnMouseDownHandler}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          id={id}\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={placeholderSearch}\n          onKeyDown={handleInputKeyDown}\n          value={input || ''}\n          onChange={(e: any) => {\n            if (!e.target.value) {\n              setSelectedValues([]);\n            }\n            if (!readOnly && !disabled && e.target.value !== input) {\n              setRestartFilter(false);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onFocus={(e) => {\n            setPlaceholderSearch('');\n            onFocus && onFocus(e);\n          }}\n          onBlur={(e) => {\n            setPlaceholderSearch(placeholder || '');\n            onBlur && onBlur(e);\n          }}\n          required={required}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          {...rest}\n        />\n        {input && !readOnly && !disabled && !loading && (\n          <IconButton action={handleInputClear} ref={clearButtonRef} useTransparentBackground={true} shape={'circular'} style={{ marginLeft: '-4px' }} variant={'secondary'}>\n            <SystemIcons.Clear />\n          </IconButton>\n        )}\n\n        {!disabled && !readOnly && loading && (\n          <div style={{ marginLeft: '-4xp' }}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </div>\n        )}\n\n        <div className={'dropdown-arrow'}>\n          {isOpen && !readOnly && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    );\n  };\n\n  return (\n    <>\n      <Dropdown ref={containerRef} disabled={disabled} isButton={false} readOnly={readOnly} className={size ? size : ''} margin={margin}>\n        {renderInput()}\n        {!readOnly && !disabled && (\n          <DropdownContent\n            containerRef={containerRef}\n            isOpen={isOpen && !loading}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            size={size ?? Size.Small}\n            focused={focused}\n            setFocused={setFocused}\n            outline={false}\n            customizationProps={{\n              itemsType: 'normal',\n              scrollable: scrollable,\n              multiSelect: false,\n              action: () => {},\n              onValueUpdate: (values: string[]) => {\n                setRestartFilter(true);\n                setInit(false);\n              },\n              items: list,\n            }}\n            filter={!disableFiltering && !restartFilter ? input || '' : ''}\n            setIsOpen={setIsOpen}\n            isButton={false}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default DropdownFilter;\n"],"mappings":"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"}
+{"version":3,"file":"DropdownFilter.js","names":["React","COLORS","ArrowDropDown","ArrowDropUp","Information","TechnicalWarning","LoadingIndicator","StyledField","Dropdown","InputField","DropdownContent","Size","AutofilledMessage","ErrorMessage","defaultOnMouseDownHandler","useActionWithin","useClickOutsideRef","useFocusOutsideRef","useFocusVisibleRef","IconButton","SystemIcons","DropdownFilter","forwardRef","ref","id","list","placeholder","onSelect","onInputChange","value","required","messageOnNoResults","disabled","readOnly","scrollable","activeValidationMessage","autofilledMessage","size","disableFiltering","buttonFontSize","margin","loading","onFocus","onBlur","rest","useState","isOpen","setIsOpen","input","setInput","activeDescendant","setActiveDescendant","restartFilter","setRestartFilter","selectedItem","setSelectedItem","selectedValues","setSelectedValues","focused","setFocused","inputFocused","setInputFocused","init","setInit","styledFieldRef","inputRef","clearButtonRef","useRef","useImperativeHandle","current","containerRef","handleInputKeyDown","e","key","preventDefault","useEffect","length","val","item","find","a","displayLabel","undefined","handleInputClear","focus","focusVisible","detail","renderInput","stopPropagation","blur","Math","floor","random","target","marginLeft","Small","neutral_600","itemsType","multiSelect","action","onValueUpdate","values","items","critical_400"],"sources":["../../src/Dropdown/DropdownFilter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { StyledField, Dropdown, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { Size } from '../types';\nimport { AutofilledMessage, ErrorMessage } from '../InputFields';\nimport { defaultOnMouseDownHandler, useActionWithin, useClickOutsideRef, useFocusOutsideRef, useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\n\ninterface DropdownFilterProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onSelect' | 'size' | 'list' | 'autoComplete' | 'type' | 'placeholder' | 'onKeyDown' | 'value' | 'onChange' | 'required' | 'tabIndex' | 'disabled' | 'readOnly'> {\n  list: DropdownItem[];\n  placeholder?: string;\n\n  value?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n\n  required?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  loading?: boolean;\n\n  disableFiltering?: boolean;\n\n  messageOnNoResults?: string;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n\n  buttonFontSize?: string;\n  margin?: string;\n  scrollable?: boolean;\n}\n\nconst DropdownFilter = React.forwardRef( ({\n                                            id,\n                                            list,\n                                            placeholder,\n                                            onSelect,\n                                            onInputChange,\n                                            value,\n                                            required,\n                                            messageOnNoResults,\n                                            disabled,\n                                            readOnly,\n                                            scrollable,\n                                            activeValidationMessage,\n                                            autofilledMessage,\n                                            size,\n                                            disableFiltering,\n                                            buttonFontSize,\n                                            margin = '4px 0',\n                                            loading,\n                                            onFocus,\n                                            onBlur,\n                                            ...rest\n                                          }: DropdownFilterProps, ref) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>();\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [selectedItem, setSelectedItem] = React.useState<DropdownItem>();\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [inputFocused, setInputFocused] = React.useState<boolean>(false);\n  const [init, setInit] = React.useState<boolean>(true);\n\n  const styledFieldRef = useFocusVisibleRef();\n  const inputRef = useFocusVisibleRef([styledFieldRef]);\n  const clearButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  useActionWithin(styledFieldRef, input && !readOnly && !disabled ? [clearButtonRef] : []);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const containerRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [],\n    useFocusOutsideRef(() => setIsOpen(false)),\n  );\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Esc' || e.key === 'Escape') {\n      e.preventDefault();\n    }\n    if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {\n      e.preventDefault();\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    setInit(true);\n    setSelectedValues(!!value ? [value] : []);\n  }, [value]);\n\n  React.useEffect(() => {\n    if (selectedValues?.length) {\n      const val = selectedValues[0];\n      const item = list.find((a) => a.value === val);\n      setSelectedItem(item);\n      setInput(item?.displayLabel ?? item?.value ?? '');\n      onSelect && !init && onSelect(val);\n    } else {\n      setSelectedItem(undefined);\n      onSelect && !init && onSelect('');\n      setInput('');\n    }\n  }, [selectedValues]);\n\n  React.useEffect(() => {\n    if (!isOpen) {\n      if (!!selectedItem) {\n        setInput(selectedItem?.displayLabel ?? selectedItem?.value ?? '');\n      } else {\n        setInput('');\n      }\n    }\n\n    setRestartFilter(true);\n  }, [isOpen, selectedItem]);\n\n  const handleInputClear = (e: any) => {\n    setInput('');\n    setSelectedValues([]);\n    onSelect && onSelect('');\n    inputRef.current?.focus({ focusVisible: e?.detail !== 1 } as any);\n  };\n\n  const renderInput = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={size ? size : ''}\n        onClick={(e: any) => {\n          if (!readOnly && !disabled) {\n            e.stopPropagation();\n            setIsOpen(!isOpen);\n            if (isOpen) {\n              inputRef.current?.blur();\n            } else {\n              inputRef.current?.focus();\n            }\n          }\n        }}\n        disabled={disabled || false}\n        readOnly={readOnly || false}\n        isPlaceholder={!input}\n        fontSize={buttonFontSize}\n        showValidationMessage={!!activeValidationMessage}\n        onMouseDown={defaultOnMouseDownHandler}\n        data-testid={`otherdiv_${id}`}>\n        <InputField\n          id={id}\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={inputFocused ? '' : placeholder}\n          onKeyDown={handleInputKeyDown}\n          value={input || ''}\n          onChange={(e: any) => {\n            if (!e.target.value) {\n              setSelectedValues([]);\n            }\n            if (!readOnly && !disabled && e.target.value !== input) {\n              setRestartFilter(false);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onFocus={(e) => {\n            setInputFocused(true);\n            onFocus && onFocus(e);\n          }}\n          onBlur={(e) => {\n            setInputFocused(false);\n            onBlur && onBlur(e);\n          }}\n          required={required}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          {...rest}\n        />\n        {input && !readOnly && !disabled && !loading && (\n          <IconButton action={handleInputClear} ref={clearButtonRef} useTransparentBackground={true} shape={'circular'} style={{ marginLeft: '-4px' }} variant={'secondary'}>\n            <SystemIcons.Clear />\n          </IconButton>\n        )}\n\n        {!disabled && !readOnly && loading && (\n          <div style={{ marginLeft: '-4xp' }}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </div>\n        )}\n\n        <div className={'dropdown-arrow'}>\n          {isOpen && !readOnly && !disabled ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    );\n  };\n\n  return (\n    <>\n      <Dropdown ref={containerRef}\n      role=\"combobox\"\n      aria-multiselectable={true} \n      aria-controls={`${id}_dropdowncontent`}\n      aria-activedescendant={activeDescendant}\n      aria-expanded={isOpen ? true : false}\n      disabled={disabled} isButton={false} readOnly={readOnly} className={size ? size : ''} margin={margin}>\n        {renderInput()}\n        {!readOnly && !disabled && (\n          <DropdownContent\n            containerRef={containerRef}\n            isOpen={isOpen && !loading}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            size={size ?? Size.Small}\n            onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n            focused={focused}\n            ariaRolesType=\"input\"\n            setFocused={setFocused}\n            outline={false}\n            customizationProps={{\n              itemsType: 'normal',\n              scrollable: scrollable,\n              multiSelect: false,\n              action: () => {},\n              onValueUpdate: (values: string[]) => {\n                setRestartFilter(true);\n                setInit(false);\n              },\n              items: list,\n            }}\n            filter={!disableFiltering && !restartFilter ? input || '' : ''}\n            setIsOpen={setIsOpen}\n            isButton={false}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n});\n\nexport default DropdownFilter;\n"],"mappings":"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"}

package/dist/Footer/Components/FooterBottomLinks.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface Link {
     label: string;
     to: string;

package/dist/Footer/Components/FooterDropdownLinks.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { NavSection } from '../../types';
 interface FooterNavSectionProps {
     navSection: NavSection;

package/dist/Footer/Components/FooterNavSection.cjs

@@ -27,6 +27,8 @@ var _typography = require("../../styles/typography");
 
 var _HyperLink = require("../../HyperLink");
 
+var _utils = require("../../utils/utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2;
@@ -46,7 +48,7 @@ var FooterNavSection = function FooterNavSection(_ref) {
 
   var navOptions = _ref.navOptions;
 
-  var _React$useState = React.useState(window.innerWidth),
+  var _React$useState = React.useState((0, _utils.hasWindow)() ? window.innerWidth : -1),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
       width = _React$useState2[0],
       setWidth = _React$useState2[1];
@@ -57,7 +59,10 @@ var FooterNavSection = function FooterNavSection(_ref) {
     }
 
     window.addEventListener('resize', handleResize);
-  });
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(NavSection, {
     children: (_navOptions$sections = navOptions.sections) === null || _navOptions$sections === void 0 ? void 0 : _navOptions$sections.map(function (no, index) {
       return width > 768 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(LinkBlock, {

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

@@ -1 +1 @@
-{"version":3,"file":"FooterNavSection.cjs","names":["NavSection","styled","section","LinkBlock","div","props","width","BREAKPOINTS","MEDIUM","LARGE","XLARGE","ComponentLStyling","ComponentTextStyle","Regular","ComponentSStyling","Bold","COLORS","white","FooterNavSection","navOptions","React","useState","window","innerWidth","setWidth","useEffect","handleResize","addEventListener","sections","map","no","index","header","links","link","Math","floor","random","to","target","label","mainId"],"sources":["../../../src/Footer/Components/FooterNavSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles';\nimport FooterDropdownLinks from './FooterDropdownLinks';\nimport {NavOptions} from '../../types';\nimport {ComponentLStyling, ComponentSStyling} from '../../styles/typography';\nimport {HyperLink} from '../../HyperLink';\n\nconst NavSection = styled.section`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  flex-flow: flex-start;\n  color: white;\n  margin-bottom: 12px;\n`;\n\nconst LinkBlock = styled.div<{ width: number }>`\n  display: ${(props) => (props.width <= 768 ? 'none' : 'flex')};\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  ${BREAKPOINTS.MEDIUM} {\n    padding: 0 24px 24px 0;\n    width: calc(50% - 24px);\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    width: calc(33% - 24px);\n  }\n  ${BREAKPOINTS.XLARGE} {\n    padding: 0 32px 32px 0;\n    width: calc(33% - 32px);\n  }\n\n  h3 {\n    ${ComponentLStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n\n  a {\n    padding: 8px 0px;\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n  }\n`;\n\ninterface FooterNavSectionProps {\n  navOptions: NavOptions;\n  mainId: string;\n}\n\nconst FooterNavSection = ({ navOptions }: FooterNavSectionProps) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  return (\n    <NavSection>\n      {navOptions.sections?.map((no, index) => {\n        return width > 768 ? (\n          <LinkBlock key={`LinkBlock_${index}`} width={width}>\n            <h3>{no.header}</h3>\n            {no.links.map((link, index) => (\n              <HyperLink key={index}\n                         id={`dropdownlink_${Math.floor(Math.random() * 999999999999)}`}\n                         variant={'inverted'}\n                         href={link.to}\n                         target={link.target || '_blank'}\n                         rel=\"noreferrer noopener\">\n                {link.label}\n              </HyperLink>\n            ))}\n          </LinkBlock>\n        ) : (\n          <FooterDropdownLinks data-testid={'footerDropLinks'} key={`LinkBlockDropdown_${index}`} navSection={no} width={width} />\n        );\n      })}\n    </NavSection>\n  );\n};\n\nexport default FooterNavSection;\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AAEA;;AACA;;;;;;;;;;AAEA,IAAMA,UAAU,GAAGC,yBAAA,CAAOC,OAAV,sNAAhB;;AASA,IAAMC,SAAS,GAAGF,yBAAA,CAAOG,GAAV,0bACF,UAACC,KAAD;EAAA,OAAYA,KAAK,CAACC,KAAN,IAAe,GAAf,GAAqB,MAArB,GAA8B,MAA1C;AAAA,CADE,EAMXC,mBAAA,CAAYC,MAND,EAWXD,mBAAA,CAAYE,KAXD,EAcXF,mBAAA,CAAYG,MAdD,EAoBT,IAAAC,6BAAA,EAAkBC,0BAAA,CAAmBC,OAArC,EAA8C,SAA9C,CApBS,EAyBT,IAAAC,6BAAA,EAAkBF,0BAAA,CAAmBG,IAArC,EAA2CC,cAAA,CAAOC,KAAlD,CAzBS,CAAf;;AAkCA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,OAA2C;EAAA;;EAAA,IAAxCC,UAAwC,QAAxCA,UAAwC;;EAClE,sBAA0BC,KAAK,CAACC,QAAN,CAAuBC,MAAM,CAACC,UAA9B,CAA1B;EAAA;EAAA,IAAOjB,KAAP;EAAA,IAAckB,QAAd;;EACAJ,KAAK,CAACK,SAAN,CAAgB,YAAM;IACpB,SAASC,YAAT,GAAwB;MACtBF,QAAQ,CAACF,MAAM,CAACC,UAAR,CAAR;IACD;;IACDD,MAAM,CAACK,gBAAP,CAAwB,QAAxB,EAAkCD,YAAlC;EACD,CALD;EAOA,oBACE,qBAAC,UAAD;IAAA,kCACGP,UAAU,CAACS,QADd,yDACG,qBAAqBC,GAArB,CAAyB,UAACC,EAAD,EAAKC,KAAL,EAAe;MACvC,OAAOzB,KAAK,GAAG,GAAR,gBACL,sBAAC,SAAD;QAAsC,KAAK,EAAEA,KAA7C;QAAA,wBACE;UAAA,UAAKwB,EAAE,CAACE;QAAR,EADF,EAEGF,EAAE,CAACG,KAAH,CAASJ,GAAT,CAAa,UAACK,IAAD,EAAOH,KAAP;UAAA,oBACZ,qBAAC,oBAAD;YACW,EAAE,yBAAkBI,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAlB,CADb;YAEW,OAAO,EAAE,UAFpB;YAGW,IAAI,EAAEH,IAAI,CAACI,EAHtB;YAIW,MAAM,EAAEJ,IAAI,CAACK,MAAL,IAAe,QAJlC;YAKW,GAAG,EAAC,qBALf;YAAA,UAMGL,IAAI,CAACM;UANR,GAAgBT,KAAhB,CADY;QAAA,CAAb,CAFH;MAAA,uBAA6BA,KAA7B,EADK,gBAeL,qBAAC,4BAAD;QAAqB,eAAa,iBAAlC;QAAwF,UAAU,EAAED,EAApG;QAAwG,KAAK,EAAExB;MAA/G,+BAA+EyB,KAA/E,EAfF;IAiBD,CAlBA;EADH,EADF;AAuBD,CAhCD;;;EAHEU,M;;eAqCavB,gB"}
+{"version":3,"file":"FooterNavSection.cjs","names":["NavSection","styled","section","LinkBlock","div","props","width","BREAKPOINTS","MEDIUM","LARGE","XLARGE","ComponentLStyling","ComponentTextStyle","Regular","ComponentSStyling","Bold","COLORS","white","FooterNavSection","navOptions","React","useState","hasWindow","window","innerWidth","setWidth","useEffect","handleResize","addEventListener","removeEventListener","sections","map","no","index","header","links","link","Math","floor","random","to","target","label","mainId"],"sources":["../../../src/Footer/Components/FooterNavSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles';\nimport FooterDropdownLinks from './FooterDropdownLinks';\nimport {NavOptions} from '../../types';\nimport {ComponentLStyling, ComponentSStyling} from '../../styles/typography';\nimport {HyperLink} from '../../HyperLink';\nimport { hasWindow } from '../../utils/utils';\n\nconst NavSection = styled.section`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  flex-flow: flex-start;\n  color: white;\n  margin-bottom: 12px;\n`;\n\nconst LinkBlock = styled.div<{ width: number }>`\n  display: ${(props) => (props.width <= 768 ? 'none' : 'flex')};\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  ${BREAKPOINTS.MEDIUM} {\n    padding: 0 24px 24px 0;\n    width: calc(50% - 24px);\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    width: calc(33% - 24px);\n  }\n  ${BREAKPOINTS.XLARGE} {\n    padding: 0 32px 32px 0;\n    width: calc(33% - 32px);\n  }\n\n  h3 {\n    ${ComponentLStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n\n  a {\n    padding: 8px 0px;\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n  }\n`;\n\ninterface FooterNavSectionProps {\n  navOptions: NavOptions;\n  mainId: string;\n}\n\nconst FooterNavSection = ({ navOptions }: FooterNavSectionProps) => {\n  const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  return (\n    <NavSection>\n      {navOptions.sections?.map((no, index) => {\n        return width > 768 ? (\n          <LinkBlock key={`LinkBlock_${index}`} width={width}>\n            <h3>{no.header}</h3>\n            {no.links.map((link, index) => (\n              <HyperLink key={index}\n                         id={`dropdownlink_${Math.floor(Math.random() * 999999999999)}`}\n                         variant={'inverted'}\n                         href={link.to}\n                         target={link.target || '_blank'}\n                         rel=\"noreferrer noopener\">\n                {link.label}\n              </HyperLink>\n            ))}\n          </LinkBlock>\n        ) : (\n          <FooterDropdownLinks data-testid={'footerDropLinks'} key={`LinkBlockDropdown_${index}`} navSection={no} width={width} />\n        );\n      })}\n    </NavSection>\n  );\n};\n\nexport default FooterNavSection;\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,UAAU,GAAGC,yBAAA,CAAOC,OAAV,sNAAhB;;AASA,IAAMC,SAAS,GAAGF,yBAAA,CAAOG,GAAV,0bACF,UAACC,KAAD;EAAA,OAAYA,KAAK,CAACC,KAAN,IAAe,GAAf,GAAqB,MAArB,GAA8B,MAA1C;AAAA,CADE,EAMXC,mBAAA,CAAYC,MAND,EAWXD,mBAAA,CAAYE,KAXD,EAcXF,mBAAA,CAAYG,MAdD,EAoBT,IAAAC,6BAAA,EAAkBC,0BAAA,CAAmBC,OAArC,EAA8C,SAA9C,CApBS,EAyBT,IAAAC,6BAAA,EAAkBF,0BAAA,CAAmBG,IAArC,EAA2CC,cAAA,CAAOC,KAAlD,CAzBS,CAAf;;AAkCA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,OAA2C;EAAA;;EAAA,IAAxCC,UAAwC,QAAxCA,UAAwC;;EAClE,sBAA0BC,KAAK,CAACC,QAAN,CAAuB,IAAAC,gBAAA,MAAcC,MAAM,CAACC,UAArB,GAAkC,CAAC,CAA1D,CAA1B;EAAA;EAAA,IAAOlB,KAAP;EAAA,IAAcmB,QAAd;;EACAL,KAAK,CAACM,SAAN,CAAgB,YAAM;IACpB,SAASC,YAAT,GAAwB;MACtBF,QAAQ,CAACF,MAAM,CAACC,UAAR,CAAR;IACD;;IACDD,MAAM,CAACK,gBAAP,CAAwB,QAAxB,EAAkCD,YAAlC;IACA,OAAO;MAAA,OAAMJ,MAAM,CAACM,mBAAP,CAA2B,QAA3B,EAAqCF,YAArC,CAAN;IAAA,CAAP;EACD,CAND,EAMG,EANH;EAQA,oBACE,qBAAC,UAAD;IAAA,kCACGR,UAAU,CAACW,QADd,yDACG,qBAAqBC,GAArB,CAAyB,UAACC,EAAD,EAAKC,KAAL,EAAe;MACvC,OAAO3B,KAAK,GAAG,GAAR,gBACL,sBAAC,SAAD;QAAsC,KAAK,EAAEA,KAA7C;QAAA,wBACE;UAAA,UAAK0B,EAAE,CAACE;QAAR,EADF,EAEGF,EAAE,CAACG,KAAH,CAASJ,GAAT,CAAa,UAACK,IAAD,EAAOH,KAAP;UAAA,oBACZ,qBAAC,oBAAD;YACW,EAAE,yBAAkBI,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAlB,CADb;YAEW,OAAO,EAAE,UAFpB;YAGW,IAAI,EAAEH,IAAI,CAACI,EAHtB;YAIW,MAAM,EAAEJ,IAAI,CAACK,MAAL,IAAe,QAJlC;YAKW,GAAG,EAAC,qBALf;YAAA,UAMGL,IAAI,CAACM;UANR,GAAgBT,KAAhB,CADY;QAAA,CAAb,CAFH;MAAA,uBAA6BA,KAA7B,EADK,gBAeL,qBAAC,4BAAD;QAAqB,eAAa,iBAAlC;QAAwF,UAAU,EAAED,EAApG;QAAwG,KAAK,EAAE1B;MAA/G,+BAA+E2B,KAA/E,EAfF;IAiBD,CAlBA;EADH,EADF;AAuBD,CAjCD;;;EAHEU,M;;eAsCazB,gB"}

package/dist/Footer/Components/FooterNavSection.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { NavOptions } from '../../types';
 interface FooterNavSectionProps {
     navOptions: NavOptions;

package/dist/Footer/Components/FooterNavSection.js

@@ -10,6 +10,7 @@ import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles';
 import FooterDropdownLinks from './FooterDropdownLinks';
 import { ComponentLStyling, ComponentSStyling } from '../../styles/typography';
 import { HyperLink } from '../../HyperLink';
+import { hasWindow } from '../../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var NavSection = styled.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  flex-flow: flex-start;\n  color: white;\n  margin-bottom: 12px;\n"])));
@@ -22,7 +23,7 @@ var FooterNavSection = function FooterNavSection(_ref) {
 
   var navOptions = _ref.navOptions;
 
-  var _React$useState = React.useState(window.innerWidth),
+  var _React$useState = React.useState(hasWindow() ? window.innerWidth : -1),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       width = _React$useState2[0],
       setWidth = _React$useState2[1];
@@ -33,7 +34,10 @@ var FooterNavSection = function FooterNavSection(_ref) {
     }
 
     window.addEventListener('resize', handleResize);
-  });
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, []);
   return /*#__PURE__*/_jsx(NavSection, {
     children: (_navOptions$sections = navOptions.sections) === null || _navOptions$sections === void 0 ? void 0 : _navOptions$sections.map(function (no, index) {
       return width > 768 ? /*#__PURE__*/_jsxs(LinkBlock, {

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

@@ -1 +1 @@
-{"version":3,"file":"FooterNavSection.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","FooterDropdownLinks","ComponentLStyling","ComponentSStyling","HyperLink","NavSection","section","LinkBlock","div","props","width","MEDIUM","LARGE","XLARGE","Regular","Bold","white","FooterNavSection","navOptions","useState","window","innerWidth","setWidth","useEffect","handleResize","addEventListener","sections","map","no","index","header","links","link","Math","floor","random","to","target","label","mainId"],"sources":["../../../src/Footer/Components/FooterNavSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles';\nimport FooterDropdownLinks from './FooterDropdownLinks';\nimport {NavOptions} from '../../types';\nimport {ComponentLStyling, ComponentSStyling} from '../../styles/typography';\nimport {HyperLink} from '../../HyperLink';\n\nconst NavSection = styled.section`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  flex-flow: flex-start;\n  color: white;\n  margin-bottom: 12px;\n`;\n\nconst LinkBlock = styled.div<{ width: number }>`\n  display: ${(props) => (props.width <= 768 ? 'none' : 'flex')};\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  ${BREAKPOINTS.MEDIUM} {\n    padding: 0 24px 24px 0;\n    width: calc(50% - 24px);\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    width: calc(33% - 24px);\n  }\n  ${BREAKPOINTS.XLARGE} {\n    padding: 0 32px 32px 0;\n    width: calc(33% - 32px);\n  }\n\n  h3 {\n    ${ComponentLStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n\n  a {\n    padding: 8px 0px;\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n  }\n`;\n\ninterface FooterNavSectionProps {\n  navOptions: NavOptions;\n  mainId: string;\n}\n\nconst FooterNavSection = ({ navOptions }: FooterNavSectionProps) => {\n  const [width, setWidth] = React.useState<number>(window.innerWidth);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n  });\n\n  return (\n    <NavSection>\n      {navOptions.sections?.map((no, index) => {\n        return width > 768 ? (\n          <LinkBlock key={`LinkBlock_${index}`} width={width}>\n            <h3>{no.header}</h3>\n            {no.links.map((link, index) => (\n              <HyperLink key={index}\n                         id={`dropdownlink_${Math.floor(Math.random() * 999999999999)}`}\n                         variant={'inverted'}\n                         href={link.to}\n                         target={link.target || '_blank'}\n                         rel=\"noreferrer noopener\">\n                {link.label}\n              </HyperLink>\n            ))}\n          </LinkBlock>\n        ) : (\n          <FooterDropdownLinks data-testid={'footerDropLinks'} key={`LinkBlockDropdown_${index}`} navSection={no} width={width} />\n        );\n      })}\n    </NavSection>\n  );\n};\n\nexport default FooterNavSection;\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAAQC,WAAR,EAAqBC,MAArB,EAA6BC,kBAA7B,QAAsD,cAAtD;AACA,OAAOC,mBAAP,MAAgC,uBAAhC;AAEA,SAAQC,iBAAR,EAA2BC,iBAA3B,QAAmD,yBAAnD;AACA,SAAQC,SAAR,QAAwB,iBAAxB;;;AAEA,IAAMC,UAAU,GAAGR,MAAM,CAACS,OAAV,wMAAhB;AASA,IAAMC,SAAS,GAAGV,MAAM,CAACW,GAAV,4aACF,UAACC,KAAD;EAAA,OAAYA,KAAK,CAACC,KAAN,IAAe,GAAf,GAAqB,MAArB,GAA8B,MAA1C;AAAA,CADE,EAMXZ,WAAW,CAACa,MAND,EAWXb,WAAW,CAACc,KAXD,EAcXd,WAAW,CAACe,MAdD,EAoBTX,iBAAiB,CAACF,kBAAkB,CAACc,OAApB,EAA6B,SAA7B,CApBR,EAyBTX,iBAAiB,CAACH,kBAAkB,CAACe,IAApB,EAA0BhB,MAAM,CAACiB,KAAjC,CAzBR,CAAf;;AAkCA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,OAA2C;EAAA;;EAAA,IAAxCC,UAAwC,QAAxCA,UAAwC;;EAClE,sBAA0BtB,KAAK,CAACuB,QAAN,CAAuBC,MAAM,CAACC,UAA9B,CAA1B;EAAA;EAAA,IAAOX,KAAP;EAAA,IAAcY,QAAd;;EACA1B,KAAK,CAAC2B,SAAN,CAAgB,YAAM;IACpB,SAASC,YAAT,GAAwB;MACtBF,QAAQ,CAACF,MAAM,CAACC,UAAR,CAAR;IACD;;IACDD,MAAM,CAACK,gBAAP,CAAwB,QAAxB,EAAkCD,YAAlC;EACD,CALD;EAOA,oBACE,KAAC,UAAD;IAAA,kCACGN,UAAU,CAACQ,QADd,yDACG,qBAAqBC,GAArB,CAAyB,UAACC,EAAD,EAAKC,KAAL,EAAe;MACvC,OAAOnB,KAAK,GAAG,GAAR,gBACL,MAAC,SAAD;QAAsC,KAAK,EAAEA,KAA7C;QAAA,wBACE;UAAA,UAAKkB,EAAE,CAACE;QAAR,EADF,EAEGF,EAAE,CAACG,KAAH,CAASJ,GAAT,CAAa,UAACK,IAAD,EAAOH,KAAP;UAAA,oBACZ,KAAC,SAAD;YACW,EAAE,yBAAkBI,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAlB,CADb;YAEW,OAAO,EAAE,UAFpB;YAGW,IAAI,EAAEH,IAAI,CAACI,EAHtB;YAIW,MAAM,EAAEJ,IAAI,CAACK,MAAL,IAAe,QAJlC;YAKW,GAAG,EAAC,qBALf;YAAA,UAMGL,IAAI,CAACM;UANR,GAAgBT,KAAhB,CADY;QAAA,CAAb,CAFH;MAAA,uBAA6BA,KAA7B,EADK,gBAeL,KAAC,mBAAD;QAAqB,eAAa,iBAAlC;QAAwF,UAAU,EAAED,EAApG;QAAwG,KAAK,EAAElB;MAA/G,+BAA+EmB,KAA/E,EAfF;IAiBD,CAlBA;EADH,EADF;AAuBD,CAhCD;;;EAHEU,M;;AAqCF,eAAetB,gBAAf"}
+{"version":3,"file":"FooterNavSection.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","FooterDropdownLinks","ComponentLStyling","ComponentSStyling","HyperLink","hasWindow","NavSection","section","LinkBlock","div","props","width","MEDIUM","LARGE","XLARGE","Regular","Bold","white","FooterNavSection","navOptions","useState","window","innerWidth","setWidth","useEffect","handleResize","addEventListener","removeEventListener","sections","map","no","index","header","links","link","Math","floor","random","to","target","label","mainId"],"sources":["../../../src/Footer/Components/FooterNavSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles';\nimport FooterDropdownLinks from './FooterDropdownLinks';\nimport {NavOptions} from '../../types';\nimport {ComponentLStyling, ComponentSStyling} from '../../styles/typography';\nimport {HyperLink} from '../../HyperLink';\nimport { hasWindow } from '../../utils/utils';\n\nconst NavSection = styled.section`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  flex-flow: flex-start;\n  color: white;\n  margin-bottom: 12px;\n`;\n\nconst LinkBlock = styled.div<{ width: number }>`\n  display: ${(props) => (props.width <= 768 ? 'none' : 'flex')};\n  flex-direction: column;\n  font-weight: normal;\n  width: 100%;\n\n  ${BREAKPOINTS.MEDIUM} {\n    padding: 0 24px 24px 0;\n    width: calc(50% - 24px);\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    width: calc(33% - 24px);\n  }\n  ${BREAKPOINTS.XLARGE} {\n    padding: 0 32px 32px 0;\n    width: calc(33% - 32px);\n  }\n\n  h3 {\n    ${ComponentLStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n\n  a {\n    padding: 8px 0px;\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.white)}\n  }\n`;\n\ninterface FooterNavSectionProps {\n  navOptions: NavOptions;\n  mainId: string;\n}\n\nconst FooterNavSection = ({ navOptions }: FooterNavSectionProps) => {\n  const [width, setWidth] = React.useState<number>(hasWindow() ? window.innerWidth : -1);\n  React.useEffect(() => {\n    function handleResize() {\n      setWidth(window.innerWidth);\n    }\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  return (\n    <NavSection>\n      {navOptions.sections?.map((no, index) => {\n        return width > 768 ? (\n          <LinkBlock key={`LinkBlock_${index}`} width={width}>\n            <h3>{no.header}</h3>\n            {no.links.map((link, index) => (\n              <HyperLink key={index}\n                         id={`dropdownlink_${Math.floor(Math.random() * 999999999999)}`}\n                         variant={'inverted'}\n                         href={link.to}\n                         target={link.target || '_blank'}\n                         rel=\"noreferrer noopener\">\n                {link.label}\n              </HyperLink>\n            ))}\n          </LinkBlock>\n        ) : (\n          <FooterDropdownLinks data-testid={'footerDropLinks'} key={`LinkBlockDropdown_${index}`} navSection={no} width={width} />\n        );\n      })}\n    </NavSection>\n  );\n};\n\nexport default FooterNavSection;\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAAQC,WAAR,EAAqBC,MAArB,EAA6BC,kBAA7B,QAAsD,cAAtD;AACA,OAAOC,mBAAP,MAAgC,uBAAhC;AAEA,SAAQC,iBAAR,EAA2BC,iBAA3B,QAAmD,yBAAnD;AACA,SAAQC,SAAR,QAAwB,iBAAxB;AACA,SAASC,SAAT,QAA0B,mBAA1B;;;AAEA,IAAMC,UAAU,GAAGT,MAAM,CAACU,OAAV,wMAAhB;AASA,IAAMC,SAAS,GAAGX,MAAM,CAACY,GAAV,4aACF,UAACC,KAAD;EAAA,OAAYA,KAAK,CAACC,KAAN,IAAe,GAAf,GAAqB,MAArB,GAA8B,MAA1C;AAAA,CADE,EAMXb,WAAW,CAACc,MAND,EAWXd,WAAW,CAACe,KAXD,EAcXf,WAAW,CAACgB,MAdD,EAoBTZ,iBAAiB,CAACF,kBAAkB,CAACe,OAApB,EAA6B,SAA7B,CApBR,EAyBTZ,iBAAiB,CAACH,kBAAkB,CAACgB,IAApB,EAA0BjB,MAAM,CAACkB,KAAjC,CAzBR,CAAf;;AAkCA,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,OAA2C;EAAA;;EAAA,IAAxCC,UAAwC,QAAxCA,UAAwC;;EAClE,sBAA0BvB,KAAK,CAACwB,QAAN,CAAuBf,SAAS,KAAKgB,MAAM,CAACC,UAAZ,GAAyB,CAAC,CAA1D,CAA1B;EAAA;EAAA,IAAOX,KAAP;EAAA,IAAcY,QAAd;;EACA3B,KAAK,CAAC4B,SAAN,CAAgB,YAAM;IACpB,SAASC,YAAT,GAAwB;MACtBF,QAAQ,CAACF,MAAM,CAACC,UAAR,CAAR;IACD;;IACDD,MAAM,CAACK,gBAAP,CAAwB,QAAxB,EAAkCD,YAAlC;IACA,OAAO;MAAA,OAAMJ,MAAM,CAACM,mBAAP,CAA2B,QAA3B,EAAqCF,YAArC,CAAN;IAAA,CAAP;EACD,CAND,EAMG,EANH;EAQA,oBACE,KAAC,UAAD;IAAA,kCACGN,UAAU,CAACS,QADd,yDACG,qBAAqBC,GAArB,CAAyB,UAACC,EAAD,EAAKC,KAAL,EAAe;MACvC,OAAOpB,KAAK,GAAG,GAAR,gBACL,MAAC,SAAD;QAAsC,KAAK,EAAEA,KAA7C;QAAA,wBACE;UAAA,UAAKmB,EAAE,CAACE;QAAR,EADF,EAEGF,EAAE,CAACG,KAAH,CAASJ,GAAT,CAAa,UAACK,IAAD,EAAOH,KAAP;UAAA,oBACZ,KAAC,SAAD;YACW,EAAE,yBAAkBI,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAlB,CADb;YAEW,OAAO,EAAE,UAFpB;YAGW,IAAI,EAAEH,IAAI,CAACI,EAHtB;YAIW,MAAM,EAAEJ,IAAI,CAACK,MAAL,IAAe,QAJlC;YAKW,GAAG,EAAC,qBALf;YAAA,UAMGL,IAAI,CAACM;UANR,GAAgBT,KAAhB,CADY;QAAA,CAAb,CAFH;MAAA,uBAA6BA,KAA7B,EADK,gBAeL,KAAC,mBAAD;QAAqB,eAAa,iBAAlC;QAAwF,UAAU,EAAED,EAApG;QAAwG,KAAK,EAAEnB;MAA/G,+BAA+EoB,KAA/E,EAfF;IAiBD,CAlBA;EADH,EADF;AAuBD,CAjCD;;;EAHEU,M;;AAsCF,eAAevB,gBAAf"}

package/dist/Footer/Components/FooterNewsletterAndSocialSection.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface FooterNewsletterAndSocialSection {
     actionOnNewsletterSignup?: (email: string) => void;
     newsletterLabel: string;

package/dist/Footer/Components/FooterTop.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface FooterTopProps {
     sitename?: string;
     showBetaTag?: boolean;

package/dist/Footer/Footer.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const Footer: ({ children }: any) => JSX.Element;
 export default Footer;

package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs

@@ -47,6 +47,8 @@ var _rooks = require("rooks");
 
 var _common = require("../common");
 
+var _utils = require("../utils/utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
@@ -70,7 +72,7 @@ var RightSide = _styledComponents.default.div(_templateObject4 || (_templateObje
 var MobileMenuBackdrop = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  height: 100vh;\n  width: 100vw;\n  overflow: hidden;\n  z-index: ", ";\n  visibility: hidden;\n\n\n  &.open {\n    visibility: visible;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  ", " {\n    visibility: hidden !important;\n  }\n"])), _styles.Z_INDEXES.backdrop, _CommonStyles.fadeIn, _CommonStyles.fadeOut, _styles.BREAKPOINTS.LARGE);
 
 var UserMenuWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  display: flex;\n  position: absolute;\n\n  ", " {\n    top: 56px;\n    right: ", ";\n  }\n"])), _styles.COLORS.white, _styles.BREAKPOINTS.LARGE, function (props) {
-  return props.offsetRight ? "".concat(window.innerWidth - props.offsetRight + 296, "px") : '10%';
+  return props.offsetRight && (0, _utils.hasWindow)() ? "".concat(window.innerWidth - props.offsetRight + 296, "px") : '10%';
 });
 
 /**

package/dist/GlobalNavigationBar/GlobalNavigationBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalNavigationBar.cjs","names":["HeaderWrapper","styled","header","COLORS","neutral_200","Z_INDEXES","sticky_menu","BREAKPOINTS","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","XSMALL","MobileMenuBackdrop","backdrop","fadeIn","fadeOut","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","React","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","usePreviousImmediate","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","useClickOutsideRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","some"],"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n  DesktopNavigationMenuProps, MenuProfileButton,\n  MobileNavigationMenuProps,\n  ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\n\nconst HeaderWrapper = styled.header`\n  background: white;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n\n  z-index: ${Z_INDEXES.sticky_menu};\n  position: relative;\n\n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\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`;\n\nconst RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n  ${BREAKPOINTS.SMALL} button {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    display: none;\n  }\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  align-items: center;\n\n  ${BREAKPOINTS.XSMALL} {\n    margin: 0 0 0 auto;\n  }\n\n  &.reverse {\n    ${HamburgerButton} {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  height: 100vh;\n  width: 100vw;\n  overflow: hidden;\n  z-index: ${Z_INDEXES.backdrop};\n  visibility: hidden;\n\n\n  &.open {\n    visibility: visible;\n    animation: ${fadeIn} 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ${fadeOut} 0.3s ease-in-out;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    visibility: hidden !important;\n  }\n`;\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n  background-color: ${COLORS.white};\n  display: flex;\n  position: absolute;\n\n  ${BREAKPOINTS.LARGE} {\n    top: 56px;\n    right: ${(props) => (props.offsetRight ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  }\n`;\n\n\ntype GlobalNavigationBarProps = {\n  isAuthenticated?: boolean;\n  useMaxWidth?: boolean;\n  maxWidth?: number;\n\n  name?: string;\n  logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n  profile?: ProfileMenu;\n\n  mobile?: MobileNavigationMenuProps;\n  desktop?: DesktopNavigationMenuProps;\n\n  testId?: string;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n                               name,\n                               isAuthenticated,\n                               logo,\n                               profile,\n                               mobile,\n                               desktop,\n                               testId,\n                               useMaxWidth = true,\n                               maxWidth,\n                             }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n  const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n  const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n  const actionsRef = React.useRef<DesktopActionsRef>(null);\n  const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n  profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n  const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  const rightSideRef = React.useRef(null);\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n  const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n  const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n  React.useEffect(() => {\n    if (!profileButtonRef.current) return;\n\n    const handleResize = () => {\n      const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n      setAvatarRight(profileRightOffset || 0);\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [profileButtonRef.current]);\n\n\n  return (\n    <>\n      <HeaderWrapper data-testid={testId}>\n        <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n          <RowLayout>\n            <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n            {\n              isAuthenticated &&\n              <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n            }\n            <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n                       ref={rightSideRef}>\n              <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n              <DesktopActions ref={actionsRef}\n                              buttons={desktop?.buttons}\n                              onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n                              user={profile?.user}/>\n              <HamburgerButton hidden={!isAuthenticated}>\n                <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n                            ref={mobileMenuButtonRef}\n                            shape={'circular'}\n                            variant={'secondary'}>\n                  <Menu size=\"24px\"/>\n                </IconButton>\n              </HamburgerButton>\n            </RightSide>\n          </RowLayout>\n        </PageWidth>\n      </HeaderWrapper>\n      <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n        <MobileMenuWrapper ref={mobileMenuRef}\n                           role=\"menu\"\n                           aria-labelledby=\"UserMenuButton\">\n          <MobileMenu {...mobile}\n                      show={showMobileMenu}\n                      onClose={() => setShowMobileMenu(false)}\n                      profile={profile}/>\n        </MobileMenuWrapper>\n      </MobileMenuBackdrop>\n      {\n        desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n        <UserMenuWrapper ref={userMenuRef}\n                         offsetRight={avatarRight}\n                         data-testid=\"testUserMenuWrapper\">\n          <UserMenu {...profile}\n                    show={showUserMenu}\n                    onHideUserMenu={() => setShowUserMenu(false)}/>\n        </UserMenuWrapper>\n      }\n    </>\n  );\n};\n\nexport default GlobalNavigationBar;\n"],"mappings":"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"}
+{"version":3,"file":"GlobalNavigationBar.cjs","names":["HeaderWrapper","styled","header","COLORS","neutral_200","Z_INDEXES","sticky_menu","BREAKPOINTS","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","XSMALL","MobileMenuBackdrop","backdrop","fadeIn","fadeOut","UserMenuWrapper","white","props","offsetRight","hasWindow","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","React","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","usePreviousImmediate","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","useClickOutsideRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","some"],"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n  DesktopNavigationMenuProps, MenuProfileButton,\n  MobileNavigationMenuProps,\n  ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\nimport { hasWindow } from '../utils/utils';\n\nconst HeaderWrapper = styled.header`\n  background: white;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n\n  z-index: ${Z_INDEXES.sticky_menu};\n  position: relative;\n\n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\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`;\n\nconst RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n  ${BREAKPOINTS.SMALL} button {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    display: none;\n  }\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  align-items: center;\n\n  ${BREAKPOINTS.XSMALL} {\n    margin: 0 0 0 auto;\n  }\n\n  &.reverse {\n    ${HamburgerButton} {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  height: 100vh;\n  width: 100vw;\n  overflow: hidden;\n  z-index: ${Z_INDEXES.backdrop};\n  visibility: hidden;\n\n\n  &.open {\n    visibility: visible;\n    animation: ${fadeIn} 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ${fadeOut} 0.3s ease-in-out;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    visibility: hidden !important;\n  }\n`;\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n  background-color: ${COLORS.white};\n  display: flex;\n  position: absolute;\n\n  ${BREAKPOINTS.LARGE} {\n    top: 56px;\n    right: ${(props) => (props.offsetRight && hasWindow() ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  }\n`;\n\n\ntype GlobalNavigationBarProps = {\n  isAuthenticated?: boolean;\n  useMaxWidth?: boolean;\n  maxWidth?: number;\n\n  name?: string;\n  logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n  profile?: ProfileMenu;\n\n  mobile?: MobileNavigationMenuProps;\n  desktop?: DesktopNavigationMenuProps;\n\n  testId?: string;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n                               name,\n                               isAuthenticated,\n                               logo,\n                               profile,\n                               mobile,\n                               desktop,\n                               testId,\n                               useMaxWidth = true,\n                               maxWidth,\n                             }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n  const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n  const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n  const actionsRef = React.useRef<DesktopActionsRef>(null);\n  const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n  profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n  const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  const rightSideRef = React.useRef(null);\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n  const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n  const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n  React.useEffect(() => {\n    if (!profileButtonRef.current) return;\n\n    const handleResize = () => {\n      const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n      setAvatarRight(profileRightOffset || 0);\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [profileButtonRef.current]);\n\n\n  return (\n    <>\n      <HeaderWrapper data-testid={testId}>\n        <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n          <RowLayout>\n            <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n            {\n              isAuthenticated &&\n              <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n            }\n            <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n                       ref={rightSideRef}>\n              <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n              <DesktopActions ref={actionsRef}\n                              buttons={desktop?.buttons}\n                              onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n                              user={profile?.user}/>\n              <HamburgerButton hidden={!isAuthenticated}>\n                <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n                            ref={mobileMenuButtonRef}\n                            shape={'circular'}\n                            variant={'secondary'}>\n                  <Menu size=\"24px\"/>\n                </IconButton>\n              </HamburgerButton>\n            </RightSide>\n          </RowLayout>\n        </PageWidth>\n      </HeaderWrapper>\n      <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n        <MobileMenuWrapper ref={mobileMenuRef}\n                           role=\"menu\"\n                           aria-labelledby=\"UserMenuButton\">\n          <MobileMenu {...mobile}\n                      show={showMobileMenu}\n                      onClose={() => setShowMobileMenu(false)}\n                      profile={profile}/>\n        </MobileMenuWrapper>\n      </MobileMenuBackdrop>\n      {\n        desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n        <UserMenuWrapper ref={userMenuRef}\n                         offsetRight={avatarRight}\n                         data-testid=\"testUserMenuWrapper\">\n          <UserMenu {...profile}\n                    show={showUserMenu}\n                    onHideUserMenu={() => setShowUserMenu(false)}/>\n        </UserMenuWrapper>\n      }\n    </>\n  );\n};\n\nexport default GlobalNavigationBar;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/GlobalNavigationBar.js

@@ -25,6 +25,7 @@ import { IconButton } from '../Button';
 import DesktopActions from './desktop/DesktopActions';
 import { usePreviousImmediate } from 'rooks';
 import { useClickOutsideRef } from '../common';
+import { hasWindow } from '../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -34,7 +35,7 @@ var HamburgerButton = styled.div(_templateObject3 || (_templateObject3 = _tagged
 var RightSide = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  ", " {\n    margin: 0 0 0 auto;\n  }\n\n  &.reverse {\n    ", " {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n"])), BREAKPOINTS.XSMALL, HamburgerButton);
 var MobileMenuBackdrop = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  height: 100vh;\n  width: 100vw;\n  overflow: hidden;\n  z-index: ", ";\n  visibility: hidden;\n\n\n  &.open {\n    visibility: visible;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ", " 0.3s ease-in-out;\n  }\n\n  ", " {\n    visibility: hidden !important;\n  }\n"])), Z_INDEXES.backdrop, fadeIn, fadeOut, BREAKPOINTS.LARGE);
 var UserMenuWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: flex;\n  position: absolute;\n\n  ", " {\n    top: 56px;\n    right: ", ";\n  }\n"])), COLORS.white, BREAKPOINTS.LARGE, function (props) {
-  return props.offsetRight ? "".concat(window.innerWidth - props.offsetRight + 296, "px") : '10%';
+  return props.offsetRight && hasWindow() ? "".concat(window.innerWidth - props.offsetRight + 296, "px") : '10%';
 });
 
 /**

package/dist/GlobalNavigationBar/GlobalNavigationBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalNavigationBar.js","names":["React","styled","Logo","MainMenu","PageWidth","COLORS","BREAKPOINTS","RightSideNav","MobileMenu","Menu","UserMenu","fadeIn","fadeOut","MobileMenuWrapper","Z_INDEXES","IconButton","DesktopActions","usePreviousImmediate","useClickOutsideRef","HeaderWrapper","header","neutral_200","sticky_menu","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","XSMALL","MobileMenuBackdrop","backdrop","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","some"],"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n  DesktopNavigationMenuProps, MenuProfileButton,\n  MobileNavigationMenuProps,\n  ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\n\nconst HeaderWrapper = styled.header`\n  background: white;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n\n  z-index: ${Z_INDEXES.sticky_menu};\n  position: relative;\n\n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\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`;\n\nconst RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n  ${BREAKPOINTS.SMALL} button {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    display: none;\n  }\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  align-items: center;\n\n  ${BREAKPOINTS.XSMALL} {\n    margin: 0 0 0 auto;\n  }\n\n  &.reverse {\n    ${HamburgerButton} {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  height: 100vh;\n  width: 100vw;\n  overflow: hidden;\n  z-index: ${Z_INDEXES.backdrop};\n  visibility: hidden;\n\n\n  &.open {\n    visibility: visible;\n    animation: ${fadeIn} 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ${fadeOut} 0.3s ease-in-out;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    visibility: hidden !important;\n  }\n`;\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n  background-color: ${COLORS.white};\n  display: flex;\n  position: absolute;\n\n  ${BREAKPOINTS.LARGE} {\n    top: 56px;\n    right: ${(props) => (props.offsetRight ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  }\n`;\n\n\ntype GlobalNavigationBarProps = {\n  isAuthenticated?: boolean;\n  useMaxWidth?: boolean;\n  maxWidth?: number;\n\n  name?: string;\n  logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n  profile?: ProfileMenu;\n\n  mobile?: MobileNavigationMenuProps;\n  desktop?: DesktopNavigationMenuProps;\n\n  testId?: string;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n                               name,\n                               isAuthenticated,\n                               logo,\n                               profile,\n                               mobile,\n                               desktop,\n                               testId,\n                               useMaxWidth = true,\n                               maxWidth,\n                             }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n  const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n  const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n  const actionsRef = React.useRef<DesktopActionsRef>(null);\n  const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n  profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n  const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  const rightSideRef = React.useRef(null);\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n  const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n  const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n  React.useEffect(() => {\n    if (!profileButtonRef.current) return;\n\n    const handleResize = () => {\n      const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n      setAvatarRight(profileRightOffset || 0);\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [profileButtonRef.current]);\n\n\n  return (\n    <>\n      <HeaderWrapper data-testid={testId}>\n        <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n          <RowLayout>\n            <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n            {\n              isAuthenticated &&\n              <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n            }\n            <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n                       ref={rightSideRef}>\n              <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n              <DesktopActions ref={actionsRef}\n                              buttons={desktop?.buttons}\n                              onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n                              user={profile?.user}/>\n              <HamburgerButton hidden={!isAuthenticated}>\n                <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n                            ref={mobileMenuButtonRef}\n                            shape={'circular'}\n                            variant={'secondary'}>\n                  <Menu size=\"24px\"/>\n                </IconButton>\n              </HamburgerButton>\n            </RightSide>\n          </RowLayout>\n        </PageWidth>\n      </HeaderWrapper>\n      <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n        <MobileMenuWrapper ref={mobileMenuRef}\n                           role=\"menu\"\n                           aria-labelledby=\"UserMenuButton\">\n          <MobileMenu {...mobile}\n                      show={showMobileMenu}\n                      onClose={() => setShowMobileMenu(false)}\n                      profile={profile}/>\n        </MobileMenuWrapper>\n      </MobileMenuBackdrop>\n      {\n        desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n        <UserMenuWrapper ref={userMenuRef}\n                         offsetRight={avatarRight}\n                         data-testid=\"testUserMenuWrapper\">\n          <UserMenu {...profile}\n                    show={showUserMenu}\n                    onHideUserMenu={() => setShowUserMenu(false)}/>\n        </UserMenuWrapper>\n      }\n    </>\n  );\n};\n\nexport default GlobalNavigationBar;\n"],"mappings":"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"}
+{"version":3,"file":"GlobalNavigationBar.js","names":["React","styled","Logo","MainMenu","PageWidth","COLORS","BREAKPOINTS","RightSideNav","MobileMenu","Menu","UserMenu","fadeIn","fadeOut","MobileMenuWrapper","Z_INDEXES","IconButton","DesktopActions","usePreviousImmediate","useClickOutsideRef","hasWindow","HeaderWrapper","header","neutral_200","sticky_menu","SMALL","LARGE","RowLayout","div","HamburgerButton","RightSide","XSMALL","MobileMenuBackdrop","backdrop","UserMenuWrapper","white","props","offsetRight","window","innerWidth","GlobalNavigationBar","name","isAuthenticated","logo","profile","mobile","desktop","testId","useMaxWidth","maxWidth","useState","showMobileMenu","setShowMobileMenu","wasMobileMenuOpen","showUserMenu","setShowUserMenu","actionsRef","useRef","profileButtonRef","current","buttons","find","a","type","ref","mobileMenuButtonRef","rightSideRef","avatarRight","setAvatarRight","userMenuRef","mobileMenuRef","useEffect","handleResize","profileRightOffset","getBoundingClientRect","right","addEventListener","removeEventListener","showBetaTag","onClick","to","items","filter","pinned","reverseRightSideOrder","action","user","some"],"sources":["../../src/GlobalNavigationBar/GlobalNavigationBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport Logo from './Logo';\nimport MainMenu from './desktop/MainMenu';\nimport {PageWidth} from '../Layouts';\nimport {COLORS, BREAKPOINTS} from '../styles';\nimport RightSideNav from './desktop/RightSideNav';\nimport MobileMenu from './mobile/MobileMenu';\nimport {Menu} from '../icons/systemicons/SystemIcons';\nimport UserMenu from './desktop/UserMenu';\nimport {fadeIn, fadeOut, Menu as MobileMenuWrapper} from './mobile/CommonStyles';\nimport {Z_INDEXES} from '../styles';\nimport {\n  DesktopNavigationMenuProps, MenuProfileButton,\n  MobileNavigationMenuProps,\n  ProfileMenu\n} from './types';\nimport {IconButton} from '../Button';\nimport DesktopActions, {DesktopActionsRef} from './desktop/DesktopActions';\nimport {usePreviousImmediate} from 'rooks';\nimport {useClickOutsideRef} from '../common';\nimport { hasWindow } from '../utils/utils';\n\nconst HeaderWrapper = styled.header`\n  background: white;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n\n  z-index: ${Z_INDEXES.sticky_menu};\n  position: relative;\n\n  height: 48px;\n\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\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`;\n\nconst RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\n\nconst HamburgerButton = styled.div`\n  ${BREAKPOINTS.SMALL} button {\n    height: 56px;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    display: none;\n  }\n`;\n\nconst RightSide = styled.div`\n  display: flex;\n  align-items: center;\n\n  ${BREAKPOINTS.XSMALL} {\n    margin: 0 0 0 auto;\n  }\n\n  &.reverse {\n    ${HamburgerButton} {\n      order: -1;\n    }\n\n    flex-direction: row-reverse;\n  }\n`;\n\nconst MobileMenuBackdrop = styled.div`\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  position: fixed;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  height: 100vh;\n  width: 100vw;\n  overflow: hidden;\n  z-index: ${Z_INDEXES.backdrop};\n  visibility: hidden;\n\n\n  &.open {\n    visibility: visible;\n    animation: ${fadeIn} 0.3s ease-in-out;\n  }\n\n  &.closed {\n    visibility: hidden;\n    animation: ${fadeOut} 0.3s ease-in-out;\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    visibility: hidden !important;\n  }\n`;\n\nconst UserMenuWrapper = styled.div<{ offsetRight?: number }>`\n  background-color: ${COLORS.white};\n  display: flex;\n  position: absolute;\n\n  ${BREAKPOINTS.LARGE} {\n    top: 56px;\n    right: ${(props) => (props.offsetRight && hasWindow() ? `${window.innerWidth - props.offsetRight + 296}px` : '10%')};\n  }\n`;\n\n\ntype GlobalNavigationBarProps = {\n  isAuthenticated?: boolean;\n  useMaxWidth?: boolean;\n  maxWidth?: number;\n\n  name?: string;\n  logo?: { onClick?: () => void; to?: string; showBetaTag?: boolean; };\n\n  profile?: ProfileMenu;\n\n  mobile?: MobileNavigationMenuProps;\n  desktop?: DesktopNavigationMenuProps;\n\n  testId?: string;\n};\n\n/**\n * @param props\n * @constructor\n * @description This component is a global navigation header bar\n */\nconst GlobalNavigationBar = ({\n                               name,\n                               isAuthenticated,\n                               logo,\n                               profile,\n                               mobile,\n                               desktop,\n                               testId,\n                               useMaxWidth = true,\n                               maxWidth,\n                             }: GlobalNavigationBarProps): React.ReactElement<GlobalNavigationBarProps> => {\n  const [showMobileMenu, setShowMobileMenu] = React.useState(false);\n  const wasMobileMenuOpen = usePreviousImmediate(showMobileMenu);\n\n  const [showUserMenu, setShowUserMenu] = React.useState(false);\n\n  const actionsRef = React.useRef<DesktopActionsRef>(null);\n  const profileButtonRef = React.useRef<HTMLButtonElement | null>() as React.MutableRefObject<HTMLButtonElement | null | undefined>;\n  profileButtonRef.current = actionsRef?.current?.buttons?.find(a => a.type === 'profile')?.ref?.current;\n\n  const mobileMenuButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  const rightSideRef = React.useRef(null);\n  const [avatarRight, setAvatarRight] = React.useState<number>(0);\n\n\n  const userMenuRef = useClickOutsideRef(() => setShowUserMenu(false), [profileButtonRef]);\n  const mobileMenuRef = useClickOutsideRef(() => setShowMobileMenu(false), [mobileMenuButtonRef]);\n\n  React.useEffect(() => {\n    if (!profileButtonRef.current) return;\n\n    const handleResize = () => {\n      const profileRightOffset = profileButtonRef.current?.getBoundingClientRect()?.right;\n      setAvatarRight(profileRightOffset || 0);\n    };\n\n    handleResize();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [profileButtonRef.current]);\n\n\n  return (\n    <>\n      <HeaderWrapper data-testid={testId}>\n        <PageWidth useMaxWidth={useMaxWidth} maxWidth={maxWidth}>\n          <RowLayout>\n            <Logo name={name || ''} showBetaTag={logo?.showBetaTag} onClick={logo?.onClick} to={logo?.to}/>\n            {\n              isAuthenticated &&\n              <MainMenu items={desktop?.items.filter(a => !a.pinned) || []} rightSideRef={rightSideRef}/>\n            }\n            <RightSide className={`${desktop?.reverseRightSideOrder ? 'reverse' : ''}`}\n                       ref={rightSideRef}>\n              <RightSideNav items={desktop?.items?.filter(a => a.pinned)} action={desktop?.action}/>\n              <DesktopActions ref={actionsRef}\n                              buttons={desktop?.buttons}\n                              onShowUserMenu={() => setShowUserMenu(!showUserMenu)}\n                              user={profile?.user}/>\n              <HamburgerButton hidden={!isAuthenticated}>\n                <IconButton action={() => setShowMobileMenu(!showMobileMenu)}\n                            ref={mobileMenuButtonRef}\n                            shape={'circular'}\n                            variant={'secondary'}>\n                  <Menu size=\"24px\"/>\n                </IconButton>\n              </HamburgerButton>\n            </RightSide>\n          </RowLayout>\n        </PageWidth>\n      </HeaderWrapper>\n      <MobileMenuBackdrop className={showMobileMenu ? 'open' : !showUserMenu && wasMobileMenuOpen ? 'closed' : ''}>\n        <MobileMenuWrapper ref={mobileMenuRef}\n                           role=\"menu\"\n                           aria-labelledby=\"UserMenuButton\">\n          <MobileMenu {...mobile}\n                      show={showMobileMenu}\n                      onClose={() => setShowMobileMenu(false)}\n                      profile={profile}/>\n        </MobileMenuWrapper>\n      </MobileMenuBackdrop>\n      {\n        desktop?.buttons?.some(a => a.type === 'profile') && !!profile &&\n        <UserMenuWrapper ref={userMenuRef}\n                         offsetRight={avatarRight}\n                         data-testid=\"testUserMenuWrapper\">\n          <UserMenu {...profile}\n                    show={showUserMenu}\n                    onHideUserMenu={() => setShowUserMenu(false)}/>\n        </UserMenuWrapper>\n      }\n    </>\n  );\n};\n\nexport default GlobalNavigationBar;\n"],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,OAAOC,IAAP,MAAiB,QAAjB;AACA,OAAOC,QAAP,MAAqB,oBAArB;AACA,SAAQC,SAAR,QAAwB,YAAxB;AACA,SAAQC,MAAR,EAAgBC,WAAhB,QAAkC,WAAlC;AACA,OAAOC,YAAP,MAAyB,wBAAzB;AACA,OAAOC,UAAP,MAAuB,qBAAvB;AACA,SAAQC,IAAR,QAAmB,kCAAnB;AACA,OAAOC,QAAP,MAAqB,oBAArB;AACA,SAAQC,MAAR,EAAgBC,OAAhB,EAAyBH,IAAI,IAAII,iBAAjC,QAAyD,uBAAzD;AACA,SAAQC,SAAR,QAAwB,WAAxB;AAMA,SAAQC,UAAR,QAAyB,WAAzB;AACA,OAAOC,cAAP,MAAgD,0BAAhD;AACA,SAAQC,oBAAR,QAAmC,OAAnC;AACA,SAAQC,kBAAR,QAAiC,WAAjC;AACA,SAASC,SAAT,QAA0B,gBAA1B;;;;AAEA,IAAMC,aAAa,GAAGnB,MAAM,CAACoB,MAAV,4ZAGUhB,MAAM,CAACiB,WAHjB,EAKNR,SAAS,CAACS,WALJ,EAUfjB,WAAW,CAACkB,KAVG,EAcflB,WAAW,CAACmB,KAdG,CAAnB;AA2BA,IAAMC,SAAS,GAAGzB,MAAM,CAAC0B,GAAV,mHAAf;AAMA,IAAMC,eAAe,GAAG3B,MAAM,CAAC0B,GAAV,wJACjBrB,WAAW,CAACkB,KADK,EAKjBlB,WAAW,CAACmB,KALK,CAArB;AAUA,IAAMI,SAAS,GAAG5B,MAAM,CAAC0B,GAAV,6PAIXrB,WAAW,CAACwB,MAJD,EASTF,eATS,CAAf;AAiBA,IAAMG,kBAAkB,GAAG9B,MAAM,CAAC0B,GAAV,sgBAWXb,SAAS,CAACkB,QAXC,EAiBPrB,MAjBO,EAsBPC,OAtBO,EAyBpBN,WAAW,CAACmB,KAzBQ,CAAxB;AA8BA,IAAMQ,eAAe,GAAGhC,MAAM,CAAC0B,GAAV,iMACCtB,MAAM,CAAC6B,KADR,EAKjB5B,WAAW,CAACmB,KALK,EAOR,UAACU,KAAD;EAAA,OAAYA,KAAK,CAACC,WAAN,IAAqBjB,SAAS,EAA9B,aAAsCkB,MAAM,CAACC,UAAP,GAAoBH,KAAK,CAACC,WAA1B,GAAwC,GAA9E,UAAwF,KAApG;AAAA,CAPQ,CAArB;;AA4BA;AACA;AACA;AACA;AACA;AACA,IAAMG,mBAAmB,GAAG,SAAtBA,mBAAsB,OAU+E;EAAA;;EAAA,IAT5EC,IAS4E,QAT5EA,IAS4E;EAAA,IAR5EC,eAQ4E,QAR5EA,eAQ4E;EAAA,IAP5EC,IAO4E,QAP5EA,IAO4E;EAAA,IAN5EC,OAM4E,QAN5EA,OAM4E;EAAA,IAL5EC,MAK4E,QAL5EA,MAK4E;EAAA,IAJ5EC,OAI4E,QAJ5EA,OAI4E;EAAA,IAH5EC,MAG4E,QAH5EA,MAG4E;EAAA,4BAF5EC,WAE4E;EAAA,IAF5EA,WAE4E,iCAF9D,IAE8D;EAAA,IAD5EC,QAC4E,QAD5EA,QAC4E;;EACzG,sBAA4ChD,KAAK,CAACiD,QAAN,CAAe,KAAf,CAA5C;EAAA;EAAA,IAAOC,cAAP;EAAA,IAAuBC,iBAAvB;;EACA,IAAMC,iBAAiB,GAAGnC,oBAAoB,CAACiC,cAAD,CAA9C;;EAEA,uBAAwClD,KAAK,CAACiD,QAAN,CAAe,KAAf,CAAxC;EAAA;EAAA,IAAOI,YAAP;EAAA,IAAqBC,eAArB;;EAEA,IAAMC,UAAU,GAAGvD,KAAK,CAACwD,MAAN,CAAgC,IAAhC,CAAnB;EACA,IAAMC,gBAAgB,GAAGzD,KAAK,CAACwD,MAAN,EAAzB;EACAC,gBAAgB,CAACC,OAAjB,GAA2BH,UAA3B,aAA2BA,UAA3B,8CAA2BA,UAAU,CAAEG,OAAvC,iFAA2B,oBAAqBC,OAAhD,oFAA2B,sBAA8BC,IAA9B,CAAmC,UAAAC,CAAC;IAAA,OAAIA,CAAC,CAACC,IAAF,KAAW,SAAf;EAAA,CAApC,CAA3B,qFAA2B,uBAA+DC,GAA1F,2DAA2B,uBAAoEL,OAA/F;EAEA,IAAMM,mBAAmB,GAAGhE,KAAK,CAACwD,MAAN,CAAgC,IAAhC,CAA5B;EAEA,IAAMS,YAAY,GAAGjE,KAAK,CAACwD,MAAN,CAAa,IAAb,CAArB;;EACA,uBAAsCxD,KAAK,CAACiD,QAAN,CAAuB,CAAvB,CAAtC;EAAA;EAAA,IAAOiB,WAAP;EAAA,IAAoBC,cAApB;;EAGA,IAAMC,WAAW,GAAGlD,kBAAkB,CAAC;IAAA,OAAMoC,eAAe,CAAC,KAAD,CAArB;EAAA,CAAD,EAA+B,CAACG,gBAAD,CAA/B,CAAtC;EACA,IAAMY,aAAa,GAAGnD,kBAAkB,CAAC;IAAA,OAAMiC,iBAAiB,CAAC,KAAD,CAAvB;EAAA,CAAD,EAAiC,CAACa,mBAAD,CAAjC,CAAxC;EAEAhE,KAAK,CAACsE,SAAN,CAAgB,YAAM;IACpB,IAAI,CAACb,gBAAgB,CAACC,OAAtB,EAA+B;;IAE/B,IAAMa,YAAY,GAAG,SAAfA,YAAe,GAAM;MAAA;;MACzB,IAAMC,kBAAkB,4BAAGf,gBAAgB,CAACC,OAApB,oFAAG,sBAA0Be,qBAA1B,EAAH,2DAAG,uBAAmDC,KAA9E;MACAP,cAAc,CAACK,kBAAkB,IAAI,CAAvB,CAAd;IACD,CAHD;;IAKAD,YAAY;IACZlC,MAAM,CAACsC,gBAAP,CAAwB,QAAxB,EAAkCJ,YAAlC;IACA,OAAO;MAAA,OAAMlC,MAAM,CAACuC,mBAAP,CAA2B,QAA3B,EAAqCL,YAArC,CAAN;IAAA,CAAP;EACD,CAXD,EAWG,CAACd,gBAAgB,CAACC,OAAlB,CAXH;EAcA,oBACE;IAAA,wBACE,KAAC,aAAD;MAAe,eAAaZ,MAA5B;MAAA,uBACE,KAAC,SAAD;QAAW,WAAW,EAAEC,WAAxB;QAAqC,QAAQ,EAAEC,QAA/C;QAAA,uBACE,MAAC,SAAD;UAAA,wBACE,KAAC,IAAD;YAAM,IAAI,EAAER,IAAI,IAAI,EAApB;YAAwB,WAAW,EAAEE,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEmC,WAA3C;YAAwD,OAAO,EAAEnC,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEoC,OAAvE;YAAgF,EAAE,EAAEpC,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEqC;UAA1F,EADF,EAGItC,eAAe,iBACf,KAAC,QAAD;YAAU,KAAK,EAAE,CAAAI,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAEmC,KAAT,CAAeC,MAAf,CAAsB,UAAApB,CAAC;cAAA,OAAI,CAACA,CAAC,CAACqB,MAAP;YAAA,CAAvB,MAAyC,EAA1D;YAA8D,YAAY,EAAEjB;UAA5E,EAJJ,eAME,MAAC,SAAD;YAAW,SAAS,YAAKpB,OAAO,SAAP,IAAAA,OAAO,WAAP,IAAAA,OAAO,CAAEsC,qBAAT,GAAiC,SAAjC,GAA6C,EAAlD,CAApB;YACW,GAAG,EAAElB,YADhB;YAAA,wBAEE,KAAC,YAAD;cAAc,KAAK,EAAEpB,OAAF,aAAEA,OAAF,yCAAEA,OAAO,CAAEmC,KAAX,mDAAE,eAAgBC,MAAhB,CAAuB,UAAApB,CAAC;gBAAA,OAAIA,CAAC,CAACqB,MAAN;cAAA,CAAxB,CAArB;cAA4D,MAAM,EAAErC,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEuC;YAA7E,EAFF,eAGE,KAAC,cAAD;cAAgB,GAAG,EAAE7B,UAArB;cACgB,OAAO,EAAEV,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAEc,OADlC;cAEgB,cAAc,EAAE;gBAAA,OAAML,eAAe,CAAC,CAACD,YAAF,CAArB;cAAA,CAFhC;cAGgB,IAAI,EAAEV,OAAF,aAAEA,OAAF,uBAAEA,OAAO,CAAE0C;YAH/B,EAHF,eAOE,KAAC,eAAD;cAAiB,MAAM,EAAE,CAAC5C,eAA1B;cAAA,uBACE,KAAC,UAAD;gBAAY,MAAM,EAAE;kBAAA,OAAMU,iBAAiB,CAAC,CAACD,cAAF,CAAvB;gBAAA,CAApB;gBACY,GAAG,EAAEc,mBADjB;gBAEY,KAAK,EAAE,UAFnB;gBAGY,OAAO,EAAE,WAHrB;gBAAA,uBAIE,KAAC,IAAD;kBAAM,IAAI,EAAC;gBAAX;cAJF;YADF,EAPF;UAAA,EANF;QAAA;MADF;IADF,EADF,eA4BE,KAAC,kBAAD;MAAoB,SAAS,EAAEd,cAAc,GAAG,MAAH,GAAY,CAACG,YAAD,IAAiBD,iBAAjB,GAAqC,QAArC,GAAgD,EAAzG;MAAA,uBACE,KAAC,iBAAD;QAAmB,GAAG,EAAEiB,aAAxB;QACmB,IAAI,EAAC,MADxB;QAEmB,mBAAgB,gBAFnC;QAAA,uBAGE,KAAC,UAAD,kCAAgBzB,MAAhB;UACY,IAAI,EAAEM,cADlB;UAEY,OAAO,EAAE;YAAA,OAAMC,iBAAiB,CAAC,KAAD,CAAvB;UAAA,CAFrB;UAGY,OAAO,EAAER;QAHrB;MAHF;IADF,EA5BF,EAuCI,CAAAE,OAAO,SAAP,IAAAA,OAAO,WAAP,gCAAAA,OAAO,CAAEc,OAAT,sEAAkB2B,IAAlB,CAAuB,UAAAzB,CAAC;MAAA,OAAIA,CAAC,CAACC,IAAF,KAAW,SAAf;IAAA,CAAxB,MAAqD,CAAC,CAACnB,OAAvD,iBACA,KAAC,eAAD;MAAiB,GAAG,EAAEyB,WAAtB;MACiB,WAAW,EAAEF,WAD9B;MAEiB,eAAY,qBAF7B;MAAA,uBAGE,KAAC,QAAD,kCAAcvB,OAAd;QACU,IAAI,EAAEU,YADhB;QAEU,cAAc,EAAE;UAAA,OAAMC,eAAe,CAAC,KAAD,CAArB;QAAA;MAF1B;IAHF,EAxCJ;EAAA,EADF;AAmDD,CA9FD;;;EApBEb,e;EACAM,W;EACAC,Q;EAEAR,I;EACAE,I;IAASoC,O;IAAsBC,E;IAAaF,W;;EAO5C/B,M;;AAwGF,eAAeP,mBAAf"}

package/dist/GlobalNavigationBar/desktop/ExtendedMainMenu.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MenuNavigationItemTypeItem } from '../../index';
 declare type Props = {
     clickMenuAction: () => void;

package/dist/GlobalNavigationBar/desktop/UserMenu.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ProfileMenu } from '../types';
 interface UserMenuProps extends ProfileMenu {
     show?: boolean;

package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.flowDown = exports.fadeOut = exports.fadeIn = exports.UserMenuSectionListStyling = exports.SiteName = exports.RowLayout = exports.Right = exports.MenuSectionList = exports.MenuSection = exports.MenuLink = exports.Menu = exports.Button = void 0;
+exports.flowDown = exports.fadeOut = exports.fadeIn = exports.UserMenuSectionListStyling = exports.SiteName = exports.ScrollableContainer = exports.RowLayout = exports.Right = exports.MobileMenuWrapper = exports.MobileHeaderText = exports.MobileHeaderNote = exports.MobileHeaderContainer = exports.MenuSectionList = exports.MenuSection = exports.MenuLink = exports.Menu = exports.Button = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -17,7 +17,9 @@ var _styles = require("../../styles");
 
 var _reactRouterDom = require("react-router-dom");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _types = require("../../types");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
 
 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); }
 
@@ -62,4 +64,24 @@ var MenuLink = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_template
 exports.MenuLink = MenuLink;
 var flowDown = (0, _styledComponents.keyframes)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
 exports.flowDown = flowDown;
+
+var MobileMenuWrapper = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n"])));
+
+exports.MobileMenuWrapper = MobileMenuWrapper;
+
+var ScrollableContainer = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 10px;\n  }\n\n  ", "\n\n  ::-webkit-scrollbar-track {\n    margin: 8px;\n  }\n"])), (0, _styles.scrollBarStyling)(_types.Size.Small));
+
+exports.ScrollableContainer = ScrollableContainer;
+
+var MobileHeaderText = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.SMALL, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.neutral_600));
+
+exports.MobileHeaderText = MobileHeaderText;
+
+var MobileHeaderNote = _styledComponents.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  word-break: break-all;\n  ", "\n"])), (0, _styles.ParagraphXSStyling)(_styles.ParagraphTextStyle.Regular, _styles.COLORS.neutral_600));
+
+exports.MobileHeaderNote = MobileHeaderNote;
+
+var MobileHeaderContainer = _styledComponents.default.div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 24px;\n  padding-bottom: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n"])), _styles.COLORS.neutral_200);
+
+exports.MobileHeaderContainer = MobileHeaderContainer;
 //# sourceMappingURL=CommonStyles.cjs.map

package/dist/GlobalNavigationBar/mobile/CommonStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CommonStyles.cjs","names":["RowLayout","styled","div","Button","button","COLORS","white","flowLeft","keyframes","flowRight","fadeOut","fadeIn","Menu","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","ul","UserMenuSectionListStyling","css","hover","primary_20","primary_600","focus","focusStyles","active","primary_100","primary_800","neutral_300","neutral_100","MenuLink","NavLink","ComponentMStyling","ComponentTextStyle","Regular","black","flowDown"],"sources":["../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"sourcesContent":["import styled, {css, keyframes} from 'styled-components';\nimport {BREAKPOINTS, COLORS, focusStyles} from '../../styles';\nimport {NavLink} from 'react-router-dom';\nimport {ComponentMStyling, ComponentTextStyle} from '../../styles';\nimport {Z_INDEXES} from '../../styles';\n\nexport const RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nexport const Button = styled.button`\n  background-color: ${COLORS.white};\n  font-weight: bold;\n  border: 0;\n`;\n\nconst flowLeft = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nconst flowRight = keyframes`\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n    transform: translateX(100%);\n  }\n`;\n\nexport const fadeOut = keyframes`\n  0% {\n    opacity: 1;\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n  }\n`;\n\nexport const fadeIn = keyframes`\n  0% {\n    opacity: 0;\n    visibility: hidden;\n  }\n  to {\n    opacity: 1;\n    visibility: visible;\n  }\n`;\n\nexport const Menu = styled.div`\n  height: 100%;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  right: 0;\n  top: 0;\n  position: absolute;\n  z-index: ${Z_INDEXES.off_canvas};\n  align-items: center;\n\n  width: 320px;\n\n  ${BREAKPOINTS.SMALL} {\n    width: 400px;\n  }\n\n  .open & {\n    visibility: visible;\n    display: flex;\n    animation: ${flowLeft} 0.3s ease-in-out;\n  }\n\n  .closed & {\n    visibility: hidden;\n    animation: ${flowRight} 0.3s ease-in-out;\n  }\n`;\n\nexport const Right = styled.div`\n  display: flex;\n  margin-left: auto;\n`;\n\nexport const SiteName = styled.span`\n  color: ${COLORS.neutral_600};\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n`;\n\nexport const MenuSection = styled.li`\n  margin-top: 16px;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nexport const MenuSectionList = styled.ul`\n  list-style: none;\n  padding: 0;\n\n  li {\n    width: 80%;\n    height: 48px;\n    margin: 0 auto 0 12px;\n\n    a {\n      height: 100%;\n    }\n  }\n`;\n\nexport const UserMenuSectionListStyling = css`\n  li {\n    position: relative;\n  }\n\n  li:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n\n    a {\n      color: ${COLORS.primary_600};\n    }\n\n    svg {\n      color: ${COLORS.primary_600};\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    z-index: ${Z_INDEXES.focus};\n\n    ${focusStyles}\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background: ${COLORS.primary_100};\n\n    a {\n      color: ${COLORS.primary_800};\n    }\n\n    svg {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  .disabled {\n    a {\n      color: ${COLORS.neutral_300};\n    }\n\n    svg {\n      color: ${COLORS.neutral_300};\n    }\n\n    background-color: ${COLORS.neutral_100};\n  }\n`;\n\nexport const MenuLink = styled(NavLink)`\n  border: none;\n  background: transparent;\n  margin: auto;\n\n  box-sizing: border-box;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  text-decoration: none;\n  text-align: center;\n  align-items: center;\n  display: flex;\n`;\n\n\nexport const flowDown = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAIO,IAAMA,SAAS,GAAGC,yBAAA,CAAOC,GAAV,+HAAf;;;;AAKA,IAAMC,MAAM,GAAGF,yBAAA,CAAOG,MAAV,uJACGC,cAAA,CAAOC,KADV,CAAZ;;;AAMP,IAAMC,QAAQ,OAAGC,2BAAH,qNAAd;AAWA,IAAMC,SAAS,OAAGD,2BAAH,wQAAf;AAaO,IAAME,OAAO,OAAGF,2BAAH,uMAAb;;AAWA,IAAMG,MAAM,OAAGH,2BAAH,uMAAZ;;;AAWA,IAAMI,IAAI,GAAGX,yBAAA,CAAOC,GAAV,8eAEKG,cAAA,CAAOC,KAFZ,EAOJO,iBAAA,CAAUC,UAPN,EAYbC,mBAAA,CAAYC,KAZC,EAmBAT,QAnBA,EAwBAE,SAxBA,CAAV;;;;AA4BA,IAAMQ,KAAK,GAAGhB,yBAAA,CAAOC,GAAV,+HAAX;;;;AAKA,IAAMgB,QAAQ,GAAGjB,yBAAA,CAAOkB,IAAV,uKACVd,cAAA,CAAOe,WADG,CAAd;;;;AAOA,IAAMC,WAAW,GAAGpB,yBAAA,CAAOqB,EAAV,kNAAjB;;;;AAUA,IAAMC,eAAe,GAAGtB,yBAAA,CAAOuB,EAAV,mPAArB;;;AAeA,IAAMC,0BAA0B,OAAGC,qBAAH,orBAMxBb,iBAAA,CAAUc,KANc,EAOftB,cAAA,CAAOuB,UAPQ,EAUxBvB,cAAA,CAAOwB,WAViB,EAcxBxB,cAAA,CAAOwB,WAdiB,EAmBxBhB,iBAAA,CAAUiB,KAnBc,EAqBjCC,mBArBiC,EA4BxBlB,iBAAA,CAAUmB,MA5Bc,EA6BrB3B,cAAA,CAAO4B,WA7Bc,EAgCxB5B,cAAA,CAAO6B,WAhCiB,EAoCxB7B,cAAA,CAAO6B,WApCiB,EA0CxB7B,cAAA,CAAO8B,WA1CiB,EA8CxB9B,cAAA,CAAO8B,WA9CiB,EAiDf9B,cAAA,CAAO+B,WAjDQ,CAAhC;;AAqDA,IAAMC,QAAQ,GAAG,IAAApC,yBAAA,EAAOqC,uBAAP,CAAH,4RAOjB,IAAAC,yBAAA,EAAkBC,0BAAA,CAAmBC,OAArC,EAA8CpC,cAAA,CAAOqC,KAArD,CAPiB,CAAd;;AAgBA,IAAMC,QAAQ,OAAGnC,2BAAH,wNAAd"}
+{"version":3,"file":"CommonStyles.cjs","names":["RowLayout","styled","div","Button","button","COLORS","white","flowLeft","keyframes","flowRight","fadeOut","fadeIn","Menu","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","ul","UserMenuSectionListStyling","css","hover","primary_20","primary_600","focus","focusStyles","active","primary_100","primary_800","neutral_300","neutral_100","MenuLink","NavLink","ComponentMStyling","ComponentTextStyle","Regular","black","flowDown","MobileMenuWrapper","ScrollableContainer","scrollBarStyling","Size","Small","MobileHeaderText","ComponentSStyling","Bold","MobileHeaderNote","ParagraphXSStyling","ParagraphTextStyle","MobileHeaderContainer","neutral_200"],"sources":["../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentSStyling, focusStyles, scrollBarStyling, ParagraphXSStyling, ParagraphTextStyle } from '../../styles';\nimport { NavLink } from 'react-router-dom';\nimport { ComponentMStyling, ComponentTextStyle } from '../../styles';\nimport { Z_INDEXES } from '../../styles';\nimport { Size } from '../../types';\n\nexport const RowLayout = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nexport const Button = styled.button`\n  background-color: ${COLORS.white};\n  font-weight: bold;\n  border: 0;\n`;\n\nconst flowLeft = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n`;\n\nconst flowRight = keyframes`\n  0% {\n    opacity: 1;\n    transform: translateX(0);\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n    transform: translateX(100%);\n  }\n`;\n\nexport const fadeOut = keyframes`\n  0% {\n    opacity: 1;\n    visibility: visible;\n  }\n  to {\n    opacity: 0;\n    visibility: hidden;\n  }\n`;\n\nexport const fadeIn = keyframes`\n  0% {\n    opacity: 0;\n    visibility: hidden;\n  }\n  to {\n    opacity: 1;\n    visibility: visible;\n  }\n`;\n\nexport const Menu = styled.div`\n  height: 100%;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  right: 0;\n  top: 0;\n  position: absolute;\n  z-index: ${Z_INDEXES.off_canvas};\n  align-items: center;\n\n  width: 320px;\n\n  ${BREAKPOINTS.SMALL} {\n    width: 400px;\n  }\n\n  .open & {\n    visibility: visible;\n    display: flex;\n    animation: ${flowLeft} 0.3s ease-in-out;\n  }\n\n  .closed & {\n    visibility: hidden;\n    animation: ${flowRight} 0.3s ease-in-out;\n  }\n`;\n\nexport const Right = styled.div`\n  display: flex;\n  margin-left: auto;\n`;\n\nexport const SiteName = styled.span`\n  color: ${COLORS.neutral_600};\n  font-weight: bold;\n  font-size: 14px;\n  margin-left: 4px;\n`;\n\nexport const MenuSection = styled.li`\n  margin-top: 16px;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nexport const MenuSectionList = styled.ul`\n  list-style: none;\n  padding: 0;\n\n  li {\n    width: 80%;\n    height: 48px;\n    margin: 0 auto 0 12px;\n\n    a {\n      height: 100%;\n    }\n  }\n`;\n\nexport const UserMenuSectionListStyling = css`\n  li {\n    position: relative;\n  }\n\n  li:hover:not(.disabled) {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n\n    a {\n      color: ${COLORS.primary_600};\n    }\n\n    svg {\n      color: ${COLORS.primary_600};\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    z-index: ${Z_INDEXES.focus};\n\n    ${focusStyles}\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    z-index: ${Z_INDEXES.active};\n    background: ${COLORS.primary_100};\n\n    a {\n      color: ${COLORS.primary_800};\n    }\n\n    svg {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  .disabled {\n    a {\n      color: ${COLORS.neutral_300};\n    }\n\n    svg {\n      color: ${COLORS.neutral_300};\n    }\n\n    background-color: ${COLORS.neutral_100};\n  }\n`;\n\nexport const MenuLink = styled(NavLink)`\n  border: none;\n  background: transparent;\n  margin: auto;\n\n  box-sizing: border-box;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  text-decoration: none;\n  text-align: center;\n  align-items: center;\n  display: flex;\n`;\n\nexport const flowDown = keyframes`\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n`;\n\nexport const MobileMenuWrapper = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\nexport const ScrollableContainer = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 10px;\n  }\n\n  ${scrollBarStyling(Size.Small)}\n\n  ::-webkit-scrollbar-track {\n    margin: 8px;\n  }\n`;\n\nexport const MobileHeaderText = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\nexport const MobileHeaderNote = styled.div`\n  word-break: break-all;\n  ${ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nexport const MobileHeaderContainer = styled.div`\n  margin: 0 24px;\n  padding-bottom: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ${COLORS.neutral_200};\n  display: flex;\n  flex-direction: column;\n`;\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAGA;;;;;;;;AAEO,IAAMA,SAAS,GAAGC,yBAAA,CAAOC,GAAV,+HAAf;;;;AAKA,IAAMC,MAAM,GAAGF,yBAAA,CAAOG,MAAV,uJACGC,cAAA,CAAOC,KADV,CAAZ;;;AAMP,IAAMC,QAAQ,OAAGC,2BAAH,qNAAd;AAWA,IAAMC,SAAS,OAAGD,2BAAH,wQAAf;AAaO,IAAME,OAAO,OAAGF,2BAAH,uMAAb;;AAWA,IAAMG,MAAM,OAAGH,2BAAH,uMAAZ;;;AAWA,IAAMI,IAAI,GAAGX,yBAAA,CAAOC,GAAV,8eAEKG,cAAA,CAAOC,KAFZ,EAOJO,iBAAA,CAAUC,UAPN,EAYbC,mBAAA,CAAYC,KAZC,EAmBAT,QAnBA,EAwBAE,SAxBA,CAAV;;;;AA4BA,IAAMQ,KAAK,GAAGhB,yBAAA,CAAOC,GAAV,+HAAX;;;;AAKA,IAAMgB,QAAQ,GAAGjB,yBAAA,CAAOkB,IAAV,uKACVd,cAAA,CAAOe,WADG,CAAd;;;;AAOA,IAAMC,WAAW,GAAGpB,yBAAA,CAAOqB,EAAV,kNAAjB;;;;AAUA,IAAMC,eAAe,GAAGtB,yBAAA,CAAOuB,EAAV,mPAArB;;;AAeA,IAAMC,0BAA0B,OAAGC,qBAAH,orBAMxBb,iBAAA,CAAUc,KANc,EAOftB,cAAA,CAAOuB,UAPQ,EAUxBvB,cAAA,CAAOwB,WAViB,EAcxBxB,cAAA,CAAOwB,WAdiB,EAmBxBhB,iBAAA,CAAUiB,KAnBc,EAqBjCC,mBArBiC,EA4BxBlB,iBAAA,CAAUmB,MA5Bc,EA6BrB3B,cAAA,CAAO4B,WA7Bc,EAgCxB5B,cAAA,CAAO6B,WAhCiB,EAoCxB7B,cAAA,CAAO6B,WApCiB,EA0CxB7B,cAAA,CAAO8B,WA1CiB,EA8CxB9B,cAAA,CAAO8B,WA9CiB,EAiDf9B,cAAA,CAAO+B,WAjDQ,CAAhC;;AAqDA,IAAMC,QAAQ,GAAG,IAAApC,yBAAA,EAAOqC,uBAAP,CAAH,4RAOjB,IAAAC,yBAAA,EAAkBC,0BAAA,CAAmBC,OAArC,EAA8CpC,cAAA,CAAOqC,KAArD,CAPiB,CAAd;;AAeA,IAAMC,QAAQ,OAAGnC,2BAAH,wNAAd;;;AAWA,IAAMoC,iBAAiB,GAAG3C,yBAAA,CAAOC,GAAV,6MAAvB;;;;AASA,IAAM2C,mBAAmB,GAAG5C,yBAAA,CAAOC,GAAV,0UAY5B,IAAA4C,wBAAA,EAAiBC,WAAA,CAAKC,KAAtB,CAZ4B,CAAzB;;;;AAmBA,IAAMC,gBAAgB,GAAGhD,yBAAA,CAAOC,GAAV,2HACzB,IAAAgD,yBAAA,EAAkBV,0BAAA,CAAmBW,IAArC,EAA2C9C,cAAA,CAAOe,WAAlD,CADyB,EAEzBL,mBAAA,CAAYC,KAFa,EAGvB,IAAAuB,yBAAA,EAAkBC,0BAAA,CAAmBW,IAArC,EAA2C9C,cAAA,CAAOe,WAAlD,CAHuB,CAAtB;;;;AAMA,IAAMgC,gBAAgB,GAAGnD,yBAAA,CAAOC,GAAV,4HAEzB,IAAAmD,0BAAA,EAAmBC,0BAAA,CAAmBb,OAAtC,EAA+CpC,cAAA,CAAOe,WAAtD,CAFyB,CAAtB;;;;AAKA,IAAMmC,qBAAqB,GAAGtD,yBAAA,CAAOC,GAAV,+OAILG,cAAA,CAAOmD,WAJF,CAA3B"}

package/dist/GlobalNavigationBar/mobile/CommonStyles.d.ts

@@ -11,3 +11,8 @@ export declare const MenuSectionList: import("styled-components").StyledComponen
 export declare const UserMenuSectionListStyling: import("styled-components").FlattenSimpleInterpolation;
 export declare const MenuLink: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react-router-dom").NavLinkProps & import("react").RefAttributes<HTMLAnchorElement>>, any, {}, never>;
 export declare const flowDown: import("styled-components").Keyframes;
+export declare const MobileMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ScrollableContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MobileHeaderText: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MobileHeaderNote: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MobileHeaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/GlobalNavigationBar/mobile/CommonStyles.js

@@ -1,12 +1,13 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
 
 import styled, { css, keyframes } from 'styled-components';
-import { BREAKPOINTS, COLORS, focusStyles } from '../../styles';
+import { BREAKPOINTS, COLORS, ComponentSStyling, focusStyles, scrollBarStyling, ParagraphXSStyling, ParagraphTextStyle } from '../../styles';
 import { NavLink } from 'react-router-dom';
 import { ComponentMStyling, ComponentTextStyle } from '../../styles';
 import { Z_INDEXES } from '../../styles';
+import { Size } from '../../types';
 export var RowLayout = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
 export var Button = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  font-weight: bold;\n  border: 0;\n"])), COLORS.white);
 var flowLeft = keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n"])));
@@ -21,4 +22,9 @@ export var MenuSectionList = styled.ul(_templateObject11 || (_templateObject11 =
 export var UserMenuSectionListStyling = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  li {\n    position: relative;\n  }\n\n  li:hover:not(.disabled) {\n    z-index: ", ";\n    background-color: ", ";\n\n    a {\n      color: ", ";\n    }\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  li:focus-within:not(.disabled) {\n    z-index: ", ";\n\n    ", "\n    a {\n      outline: none;\n    }\n  }\n\n  li:active:not(.disabled) {\n    z-index: ", ";\n    background: ", ";\n\n    a {\n      color: ", ";\n    }\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .disabled {\n    a {\n      color: ", ";\n    }\n\n    svg {\n      color: ", ";\n    }\n\n    background-color: ", ";\n  }\n"])), Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_600, COLORS.primary_600, Z_INDEXES.focus, focusStyles, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_100);
 export var MenuLink = styled(NavLink)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  border: none;\n  background: transparent;\n  margin: auto;\n\n  box-sizing: border-box;\n\n  ", "\n\n  text-decoration: none;\n  text-align: center;\n  align-items: center;\n  display: flex;\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black));
 export var flowDown = keyframes(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])));
+export var MobileMenuWrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n"])));
+export var ScrollableContainer = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  overflow-y: auto;\n  max-height: 100%;\n\n  &.scrollable {\n    margin-right: 6px;\n    padding-right: 10px;\n  }\n\n  ", "\n\n  ::-webkit-scrollbar-track {\n    margin: 8px;\n  }\n"])), scrollBarStyling(Size.Small));
+export var MobileHeaderText = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  ", "\n  ", " {\n    ", "\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), BREAKPOINTS.SMALL, ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600));
+export var MobileHeaderNote = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  word-break: break-all;\n  ", "\n"])), ParagraphXSStyling(ParagraphTextStyle.Regular, COLORS.neutral_600));
+export var MobileHeaderContainer = styled.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  margin: 0 24px;\n  padding-bottom: 8px;\n  box-sizing: border-box;\n  border-bottom: 1px solid ", ";\n  display: flex;\n  flex-direction: column;\n"])), COLORS.neutral_200);
 //# sourceMappingURL=CommonStyles.js.map