@laerdal/life-react-components 1.2.2-dev.9.full → 1.3.0

package/dist/esm/InputFields/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/SearchBar.tsx"],"names":["React","COLORS","Search","SearchIcon","Clear","ClearIcon","TechnicalWarning","WarningMessage","InputWrapper","SearchIconWrapper","IconButton","SearchBarInput","SearchField","styled","ClearIconWrapper","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","inputRef","useRef","tabbedHere","setTabbedHere","useState","isPressingEnter","e","key","preventDefault","stopPropagation","term","concat","warning_400"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { COLORS } from '../styles/index';\nimport { Search as SearchIcon, Clear as ClearIcon, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { WarningMessage, InputWrapper, SearchIconWrapper, StyledIcon } from './styling';\nimport { IconButton } from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport styled from 'styled-components';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: 'small' | 'medium';\n  margin?: string;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  \n  &.hidden{\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  validationMessage,\n  onKeyDown,\n  size,\n  margin = '4px 0',\n}) => {\n  const inputRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={`${id}_main`} size={size || ''} searchTerm={searchTerm} disabled={disabled} tabbedHere={tabbedHere} validationMessage={validationMessage}>\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SearchIcon size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            ref={inputRef}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setTabbedHere={setTabbedHere}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enterSearch}\n          />\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n      </InputWrapper>\n      {validationMessage && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.warning_400} className={size || ''} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"file":"SearchBar.js"}
+{"version":3,"sources":["../../../src/InputFields/SearchBar.tsx"],"names":["React","COLORS","Search","SearchIcon","Clear","ClearIcon","TechnicalWarning","WarningMessage","InputWrapper","SearchIconWrapper","IconButton","SearchBarInput","SearchField","styled","ClearIconWrapper","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","inputRef","useRef","tabbedHere","setTabbedHere","useState","isPressingEnter","e","key","preventDefault","stopPropagation","term","concat","warning_400"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { COLORS } from '../styles/index';\nimport { Search as SearchIcon, Clear as ClearIcon, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { WarningMessage, InputWrapper, SearchIconWrapper, StyledIcon } from './styling';\nimport { IconButton } from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport { Size } from '../types';\nimport styled from 'styled-components';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  \n  &.hidden{\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  validationMessage,\n  onKeyDown,\n  size,\n  margin = '4px 0',\n}) => {\n  const inputRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={`${id}_main`} size={size || ''} searchTerm={searchTerm} disabled={disabled} tabbedHere={tabbedHere} validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            ref={inputRef}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setTabbedHere={setTabbedHere}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enterSearch}\n          />\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SearchIcon size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n      </InputWrapper>\n      {validationMessage && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.warning_400} className={size || ''} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"file":"SearchBar.js"}

package/dist/esm/InputFields/TextField.js

@@ -93,7 +93,6 @@ TextField.propTypes = {
   pattern: _pt.string,
   maxLength: _pt.number,
   withoutBorder: _pt.bool,
-  size: _pt.oneOf(['small', 'medium']),
   margin: _pt.string
 };
 export default TextField;

package/dist/esm/InputFields/TextField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/TextField.tsx"],"names":["React","TechnicalWarning","COLORS","ErrorMessage","InputFieldStyling","InputWrapper","WarningMessage","TextField","id","disabled","locked","onChange","hasError","value","validationMessage","validationIsCritical","type","autoComplete","placeholder","required","correct","pattern","maxLength","withoutBorder","size","margin","supressFocusRef","useRef","tabbedHere","setTabbedHere","useState","e","preventDefault","concat","target","undefined","current","warning_400","critical_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { COLORS } from '../styles';\nimport { ErrorMessage, InputFieldStyling, InputWrapper, WarningMessage } from './styling';\n\ntype TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (text: string) => void;\n  hasError?: boolean;\n  value?: string;\n  validationMessage?: string;\n  validationIsCritical?: boolean;\n  type?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  correct?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: 'small' | 'medium';\n  margin?: string;\n};\n\nconst TextField = ({\n  id,\n  disabled,\n  locked,\n  onChange,\n  hasError,\n  value,\n  validationMessage,\n  validationIsCritical,\n  type,\n  autoComplete,\n  placeholder,\n  required,\n  correct,\n  pattern,\n  maxLength,\n  withoutBorder,\n  size,\n  margin = '4px 0',\n}: TextFieldProps) => {\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n  return (\n    <>\n      <InputWrapper\n        locked={locked}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || locked) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          type={type || 'text'}\n          value={value}\n          className={(hasError ? 'error' : '').concat(size ? size : '')}\n          tabIndex={locked || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={placeholder}\n          disabled={disabled}\n          locked={locked}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeValidationMessage={validationMessage !== '' && validationMessage !== undefined}\n          activeErrorMessage={validationMessage !== '' && validationMessage !== undefined && validationIsCritical}\n          required={required}\n          correctInput={correct}\n          tabbedHere={tabbedHere}\n          pattern={pattern}\n          maxLength={maxLength}\n          onBlur={() => setTabbedHere(false)}\n          withoutBorder={withoutBorder}\n          onMouseDown={(e: any) => {\n            if (!(locked || disabled) && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!(locked || disabled)) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n        />\n      </InputWrapper>\n      {validationMessage && !validationIsCritical && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      )}\n      {validationMessage && validationIsCritical && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default TextField;\n"],"file":"TextField.js"}
+{"version":3,"sources":["../../../src/InputFields/TextField.tsx"],"names":["React","TechnicalWarning","COLORS","ErrorMessage","InputFieldStyling","InputWrapper","WarningMessage","TextField","id","disabled","locked","onChange","hasError","value","validationMessage","validationIsCritical","type","autoComplete","placeholder","required","correct","pattern","maxLength","withoutBorder","size","margin","supressFocusRef","useRef","tabbedHere","setTabbedHere","useState","e","preventDefault","concat","target","undefined","current","warning_400","critical_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { COLORS } from '../styles';\nimport { Size} from '../types';\nimport { ErrorMessage, InputFieldStyling, InputWrapper, WarningMessage } from './styling';\n\ntype TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (text: string) => void;\n  hasError?: boolean;\n  value?: string;\n  validationMessage?: string;\n  validationIsCritical?: boolean;\n  type?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  correct?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst TextField = ({\n  id,\n  disabled,\n  locked,\n  onChange,\n  hasError,\n  value,\n  validationMessage,\n  validationIsCritical,\n  type,\n  autoComplete,\n  placeholder,\n  required,\n  correct,\n  pattern,\n  maxLength,\n  withoutBorder,\n  size,\n  margin = '4px 0',\n}: TextFieldProps) => {\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n  return (\n    <>\n      <InputWrapper\n        locked={locked}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || locked) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          type={type || 'text'}\n          value={value}\n          className={(hasError ? 'error' : '').concat(size ? size : '')}\n          tabIndex={locked || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={placeholder}\n          disabled={disabled}\n          locked={locked}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeValidationMessage={validationMessage !== '' && validationMessage !== undefined}\n          activeErrorMessage={validationMessage !== '' && validationMessage !== undefined && validationIsCritical}\n          required={required}\n          correctInput={correct}\n          tabbedHere={tabbedHere}\n          pattern={pattern}\n          maxLength={maxLength}\n          onBlur={() => setTabbedHere(false)}\n          withoutBorder={withoutBorder}\n          onMouseDown={(e: any) => {\n            if (!(locked || disabled) && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!(locked || disabled)) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n        />\n      </InputWrapper>\n      {validationMessage && !validationIsCritical && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      )}\n      {validationMessage && validationIsCritical && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default TextField;\n"],"file":"TextField.js"}

package/dist/esm/InputFields/Textarea.js

@@ -10,10 +10,10 @@ import * as React from 'react';
 
 import { COLORS } from '../styles';
 import { ErrorMessage, WarningMessage } from './styling';
+
 /**
  * Import custom components.
  */
-
 import { TechnicalWarning } from '../icons/systemicons/SystemIcons';
 /**
  * Import third-party libraries.
@@ -131,7 +131,6 @@ Textarea.propTypes = {
   onChange: _pt.func,
   validationType: _pt.oneOf(['error', 'warning']),
   validationMessage: _pt.string,
-  size: _pt.oneOf(['small', 'medium']).isRequired,
   margin: _pt.string
 };
 export default Textarea;

package/dist/esm/InputFields/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/Textarea.tsx"],"names":["React","COLORS","ErrorMessage","WarningMessage","TechnicalWarning","styled","ComponentMStyling","ComponentTextStyle","TextareaWrapper","div","props","margin","TextArea","textarea","neutral_400","white","Italic","black","primary_700","primary_800","focus_25","focus","warning_500","critical_500","neutral_100","neutral_300","neutral_600","Textarea","id","placeholder","value","size","disabled","validationType","validationMessage","onChange","e","target","warning_400","critical_400"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\nimport { ErrorMessage, WarningMessage } from './styling';\n\n/**\n * Import custom components.\n */\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 1px;\n  padding: 16px;\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    width: 304px;\n  }\n\n  &.medium {\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 0px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\n    margin: 0px;\n    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};\n  }\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus,\n  &.warning:active {\n    border: none;\n    margin: 1px;\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus,\n  &.error:active {\n    border: none;\n    margin: 1px;\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 1px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n`;\n\n// Add component-specific types\ntype TextareaProps = {\n  id: string;\n  placeholder: string;\n  value?: string;\n  disabled?: boolean;\n  onChange?: (text: string) => void;\n  validationType?: 'error' | 'warning';\n  validationMessage?: string;\n  size: 'small' | 'medium';\n  margin?: string;\n};\n\nconst Textarea: React.FunctionComponent<TextareaProps> = ({ id, placeholder, value, size, disabled, validationType, validationMessage, onChange, margin }: TextareaProps) => {\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        value={value}\n        placeholder={placeholder}\n        className={`${size} ${validationType}`}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n      />\n      {validationMessage && validationType === 'warning' && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      )}\n      {validationMessage && validationType === 'error' && (\n        <ErrorMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </TextareaWrapper>\n  );\n};\n\nexport default Textarea;\n"],"file":"Textarea.js"}
+{"version":3,"sources":["../../../src/InputFields/Textarea.tsx"],"names":["React","COLORS","ErrorMessage","WarningMessage","TechnicalWarning","styled","ComponentMStyling","ComponentTextStyle","TextareaWrapper","div","props","margin","TextArea","textarea","neutral_400","white","Italic","black","primary_700","primary_800","focus_25","focus","warning_500","critical_500","neutral_100","neutral_300","neutral_600","Textarea","id","placeholder","value","size","disabled","validationType","validationMessage","onChange","e","target","warning_400","critical_400"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\nimport { ErrorMessage, WarningMessage } from './styling';\nimport { Size } from '../types';\n\n/**\n * Import custom components.\n */\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 1px;\n  padding: 16px;\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    width: 304px;\n  }\n\n  &.medium {\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 0px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\n    margin: 0px;\n    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};\n  }\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus,\n  &.warning:active {\n    border: none;\n    margin: 1px;\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus,\n  &.error:active {\n    border: none;\n    margin: 1px;\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 1px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n`;\n\n// Add component-specific types\ntype TextareaProps = {\n  id: string;\n  placeholder: string;\n  value?: string;\n  disabled?: boolean;\n  onChange?: (text: string) => void;\n  validationType?: 'error' | 'warning';\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst Textarea: React.FunctionComponent<TextareaProps> = ({ id, placeholder, value, size, disabled, validationType, validationMessage, onChange, margin }: TextareaProps) => {\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        value={value}\n        placeholder={placeholder}\n        className={`${size} ${validationType}`}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n      />\n      {validationMessage && validationType === 'warning' && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      )}\n      {validationMessage && validationType === 'error' && (\n        <ErrorMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </TextareaWrapper>\n  );\n};\n\nexport default Textarea;\n"],"file":"Textarea.js"}

package/dist/esm/InputFields/__tests__/QuickSearch.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import { Size } from '../../types';
 import 'jest-styled-components';
 import { QuickSearch } from '..';
 describe('<QuickSearch />', () => {
@@ -16,7 +17,7 @@ describe('<QuickSearch />', () => {
       }
     }, /*#__PURE__*/React.createElement(QuickSearch, {
       id: "QuickSearch",
-      size: 'small',
+      size: Size.Small,
       enterSearch: () => {
         searchEntered = true;
       },

package/dist/esm/InputFields/__tests__/QuickSearch.test.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/InputFields/__tests__/QuickSearch.test.tsx"],"names":["React","render","QuickSearch","describe","it","search","searchEntered","queryByText","getByTestId","queryAllByTestId","width","term","expect","classList","contains","toBeTruthy","toBeDefined","length","toBe","click","parentElement","toHaveProperty"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,QAAuB,wBAAvB;AACA,OAAO,wBAAP;AACA,SAASC,WAAT,QAA4B,IAA5B;AAEAC,QAAQ,CAAC,iBAAD,EAAoB,MAAM;AAChCC,EAAAA,EAAE,CAAC,sBAAD,EAAyB,YAAY;AACrC,QAAIC,MAAM,GAAG,EAAb;AACA,QAAIC,aAAa,GAAG,KAApB;AACA,UAAM;AAAEC,MAAAA,WAAF;AAAeC,MAAAA,WAAf;AAA4BC,MAAAA;AAA5B,QAAiDR,MAAM,eAC3D;AAAK,MAAA,KAAK,EAAE;AAAES,QAAAA,KAAK,EAAE;AAAT;AAAZ,oBACE,oBAAC,WAAD;AACE,MAAA,EAAE,EAAC,aADL;AAEE,MAAA,IAAI,EAAE,OAFR;AAGE,MAAA,WAAW,EAAE,MAAM;AACjBJ,QAAAA,aAAa,GAAG,IAAhB;AACD,OALH;AAME,MAAA,YAAY,EAAE,MAAM;AAClBD,QAAAA,MAAM,GAAG,EAAT;AACD,OARH;AASE,MAAA,aAAa,EAAGM,IAAD,IAAU;AACvBN,QAAAA,MAAM,GAAGM,IAAT;AACD;AAXH,MADF,CAD2D,CAA7D;AAiBAC,IAAAA,MAAM,CAACJ,WAAW,CAAC,kBAAD,CAAX,CAAgCK,SAAhC,CAA0CC,QAA1C,CAAmD,OAAnD,CAAD,CAAN,CAAoEC,UAApE;AACAH,IAAAA,MAAM,CAACJ,WAAW,CAAC,0BAAD,CAAZ,CAAN,CAAgDQ,WAAhD,GArBqC,CAuBrC;;AACAJ,IAAAA,MAAM,CAACH,gBAAgB,CAAC,aAAD,CAAhB,CAAgCQ,MAAjC,CAAN,CAA+CC,IAA/C,CAAoD,CAApD;AACCV,IAAAA,WAAW,CAAC,0BAAD,CAAZ,EAAgEW,KAAhE;AACAP,IAAAA,MAAM,CAACJ,WAAW,CAAC,aAAD,CAAZ,CAAN,CAAmCQ,WAAnC;AACAJ,IAAAA,MAAM,CAACJ,WAAW,CAAC,kBAAD,CAAX,CAAgCK,SAAhC,CAA0CC,QAA1C,CAAmD,UAAnD,CAAD,CAAN,CAAuEC,UAAvE;AACAH,IAAAA,MAAM,CAACJ,WAAW,CAAC,uBAAD,CAAX,CAAqCY,aAAtC,CAAN,CAA2DC,cAA3D,CAA0E,QAA1E;AACD,GA7BC,CAAF;AA8BD,CA/BO,CAAR","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport 'jest-styled-components';\nimport { QuickSearch } from '..';\n\ndescribe('<QuickSearch />', () => {\n  it('Renders quick search', async () => {\n    let search = '';\n    let searchEntered = false;\n    const { queryByText, getByTestId, queryAllByTestId } = render(\n      <div style={{ width: '400px' }}>\n        <QuickSearch\n          id=\"QuickSearch\"\n          size={'small'}\n          enterSearch={() => {\n            searchEntered = true;\n          }}\n          removeSearch={() => {\n            search = '';\n          }}\n          setSearchTerm={(term) => {\n            search = term;\n          }}\n        />\n      </div>,\n    );\n    expect(getByTestId('QuickSearch_main').classList.contains('small')).toBeTruthy();\n    expect(getByTestId('QuickSearch_Searchbutton')).toBeDefined();\n\n    // Test click on icon and check that input field shows\n    expect(queryAllByTestId('QuickSearch').length).toBe(0);\n    (getByTestId('QuickSearch_Searchbutton') as HTMLButtonElement)?.click();\n    expect(getByTestId('QuickSearch')).toBeDefined();\n    expect(getByTestId('QuickSearch_main').classList.contains('expanded')).toBeTruthy();\n    expect(getByTestId('QuickSearch_Clearicon').parentElement).toHaveProperty('hidden');\n  });\n});\n"],"file":"QuickSearch.test.js"}
+{"version":3,"sources":["../../../../src/InputFields/__tests__/QuickSearch.test.tsx"],"names":["React","render","Size","QuickSearch","describe","it","search","searchEntered","queryByText","getByTestId","queryAllByTestId","width","Small","term","expect","classList","contains","toBeTruthy","toBeDefined","length","toBe","click","parentElement","toHaveProperty"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,QAAuB,wBAAvB;AACA,SAAQC,IAAR,QAAmB,aAAnB;AACA,OAAO,wBAAP;AACA,SAASC,WAAT,QAA4B,IAA5B;AAEAC,QAAQ,CAAC,iBAAD,EAAoB,MAAM;AAChCC,EAAAA,EAAE,CAAC,sBAAD,EAAyB,YAAY;AACrC,QAAIC,MAAM,GAAG,EAAb;AACA,QAAIC,aAAa,GAAG,KAApB;AACA,UAAM;AAAEC,MAAAA,WAAF;AAAeC,MAAAA,WAAf;AAA4BC,MAAAA;AAA5B,QAAiDT,MAAM,eAC3D;AAAK,MAAA,KAAK,EAAE;AAAEU,QAAAA,KAAK,EAAE;AAAT;AAAZ,oBACE,oBAAC,WAAD;AACE,MAAA,EAAE,EAAC,aADL;AAEE,MAAA,IAAI,EAAET,IAAI,CAACU,KAFb;AAGE,MAAA,WAAW,EAAE,MAAM;AACjBL,QAAAA,aAAa,GAAG,IAAhB;AACD,OALH;AAME,MAAA,YAAY,EAAE,MAAM;AAClBD,QAAAA,MAAM,GAAG,EAAT;AACD,OARH;AASE,MAAA,aAAa,EAAGO,IAAD,IAAU;AACvBP,QAAAA,MAAM,GAAGO,IAAT;AACD;AAXH,MADF,CAD2D,CAA7D;AAiBAC,IAAAA,MAAM,CAACL,WAAW,CAAC,kBAAD,CAAX,CAAgCM,SAAhC,CAA0CC,QAA1C,CAAmD,OAAnD,CAAD,CAAN,CAAoEC,UAApE;AACAH,IAAAA,MAAM,CAACL,WAAW,CAAC,0BAAD,CAAZ,CAAN,CAAgDS,WAAhD,GArBqC,CAuBrC;;AACAJ,IAAAA,MAAM,CAACJ,gBAAgB,CAAC,aAAD,CAAhB,CAAgCS,MAAjC,CAAN,CAA+CC,IAA/C,CAAoD,CAApD;AACCX,IAAAA,WAAW,CAAC,0BAAD,CAAZ,EAAgEY,KAAhE;AACAP,IAAAA,MAAM,CAACL,WAAW,CAAC,aAAD,CAAZ,CAAN,CAAmCS,WAAnC;AACAJ,IAAAA,MAAM,CAACL,WAAW,CAAC,kBAAD,CAAX,CAAgCM,SAAhC,CAA0CC,QAA1C,CAAmD,UAAnD,CAAD,CAAN,CAAuEC,UAAvE;AACAH,IAAAA,MAAM,CAACL,WAAW,CAAC,uBAAD,CAAX,CAAqCa,aAAtC,CAAN,CAA2DC,cAA3D,CAA0E,QAA1E;AACD,GA7BC,CAAF;AA8BD,CA/BO,CAAR","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport {Size} from '../../types';\nimport 'jest-styled-components';\nimport { QuickSearch } from '..';\n\ndescribe('<QuickSearch />', () => {\n  it('Renders quick search', async () => {\n    let search = '';\n    let searchEntered = false;\n    const { queryByText, getByTestId, queryAllByTestId } = render(\n      <div style={{ width: '400px' }}>\n        <QuickSearch\n          id=\"QuickSearch\"\n          size={Size.Small}\n          enterSearch={() => {\n            searchEntered = true;\n          }}\n          removeSearch={() => {\n            search = '';\n          }}\n          setSearchTerm={(term) => {\n            search = term;\n          }}\n        />\n      </div>,\n    );\n    expect(getByTestId('QuickSearch_main').classList.contains('small')).toBeTruthy();\n    expect(getByTestId('QuickSearch_Searchbutton')).toBeDefined();\n\n    // Test click on icon and check that input field shows\n    expect(queryAllByTestId('QuickSearch').length).toBe(0);\n    (getByTestId('QuickSearch_Searchbutton') as HTMLButtonElement)?.click();\n    expect(getByTestId('QuickSearch')).toBeDefined();\n    expect(getByTestId('QuickSearch_main').classList.contains('expanded')).toBeTruthy();\n    expect(getByTestId('QuickSearch_Clearicon').parentElement).toHaveProperty('hidden');\n  });\n});\n"],"file":"QuickSearch.test.js"}

package/dist/esm/InputFields/components/SearchBarInput.js

@@ -114,7 +114,6 @@ SearchBarInput.propTypes = {
   placeholder: _pt.string,
   disabled: _pt.bool,
   onKeyDown: _pt.func,
-  size: _pt.oneOf(['small', 'medium']),
   setTabbedHere: _pt.func.isRequired,
   onBlur: _pt.func
 };

package/dist/esm/InputFields/components/SearchBarInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/InputFields/components/SearchBarInput.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","Search","input","attrs","type","Regular","black","Italic","neutral_500","BigSearch","neutral_600","MEDIUM","SearchBarInput","forwardRef","props","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","setTabbedHere","onBlur","isPressingEnter","e","key","preventDefault","stopPropagation","target","value"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles/typography';\n\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\n  appearance: none;\n  width: calc(100% - 96px);\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  /* To prevent browser putting its own cross inside the search bar */\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  &:focus {\n    outline-width: 0;\n  }\n`;\n\nexport const BigSearch = styled(Search)`\n  height: 32px;\n  border-width: 0;\n  margin-left: 50px;\n  outline: none;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.small {\n    ::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.medium {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n`;\n\ntype SearchBarInputProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: 'small' | 'medium';\n  setTabbedHere: (tabbedHere: boolean) => void;\n  onBlur?: (e: any) => void;\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, setTabbedHere, onBlur } = props;\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <BigSearch\n      placeholder={disabled ? '' : placeholder}\n      id={id}\n      data-testid={id}\n      className={size ? size : ''}\n      tabIndex={0}\n      disabled={disabled}\n      onChange={(e: any) => setSearchTerm(e.target.value)}\n      value={searchTerm}\n      ref={ref}\n      onBlur={(e) => (onBlur ? onBlur(e) : setTabbedHere(false))}\n      onKeyDown={onKeyDown}\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"file":"SearchBarInput.js"}
+{"version":3,"sources":["../../../../src/InputFields/components/SearchBarInput.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","Search","input","attrs","type","Regular","black","Italic","neutral_500","BigSearch","neutral_600","MEDIUM","SearchBarInput","forwardRef","props","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","setTabbedHere","onBlur","isPressingEnter","e","key","preventDefault","stopPropagation","target","value"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\nimport { Size } from '../../types';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles/typography';\n\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\n  appearance: none;\n  width: calc(100% - 96px);\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  /* To prevent browser putting its own cross inside the search bar */\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  &:focus {\n    outline-width: 0;\n  }\n`;\n\nexport const BigSearch = styled(Search)`\n  height: 32px;\n  border-width: 0;\n  margin-left: 50px;\n  outline: none;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.small {\n    ::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.medium {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n`;\n\ntype SearchBarInputProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  setTabbedHere: (tabbedHere: boolean) => void;\n  onBlur?: (e: any) => void;\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, setTabbedHere, onBlur } = props;\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <BigSearch\n      placeholder={disabled ? '' : placeholder}\n      id={id}\n      data-testid={id}\n      className={size ? size : ''}\n      tabIndex={0}\n      disabled={disabled}\n      onChange={(e: any) => setSearchTerm(e.target.value)}\n      value={searchTerm}\n      ref={ref}\n      onBlur={(e) => (onBlur ? onBlur(e) : setTabbedHere(false))}\n      onKeyDown={onKeyDown}\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"file":"SearchBarInput.js"}

package/dist/esm/List/ListRow.js

@@ -10,6 +10,7 @@ import { TooltipWrapper } from '../Tooltips';
 import { DropdownButton } from '../Dropdown';
 import { SystemIcons } from '../icons';
 import { Size } from '../types';
+import { Z_INDEXES } from '../styles/z-indexes';
 const Row = styled.div`
   display: flex;
   flex-direction: row;
@@ -36,18 +37,20 @@ const Row = styled.div`
   &.interactive:hover:not(.in-action):not(.disabled) {
     background-color: ${COLORS.primary_20};
     color: ${COLORS.primary_700};
+    z-index: ${Z_INDEXES.hover};
   }
 
   &.interactive:active:not(.in-action):not(.disabled) {
     background-color: ${COLORS.primary_100};
     color: ${COLORS.primary_800};
     box-shadow: none;
+    z-index: ${Z_INDEXES.active};
   }
 
   &.interactive:focus {
     outline: none;
     box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;
-    z-index: 1;
+    z-index: ${Z_INDEXES.focus};
   }
 
   &.disabled {

package/dist/esm/List/ListRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","DropdownButton","SystemIcons","Size","Row","div","neutral_100","neutral_600","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Regular","ListRow","size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","inAction","setInAction","useState","handleKeyPress","e","key","rowClassName","concat","undefined","Large","Small","XSmall"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AAEA,SACEC,iBADF,EAEEC,iBAFF,EAGEC,iBAHF,EAIEC,kBAJF,EAKEC,mBALF,QAMO,sBANP;AAQA,SAAQC,cAAR,QAA6B,aAA7B;AACA,SAAQC,cAAR,QAA6B,aAA7B;AACA,SAAQC,WAAR,QAA0B,UAA1B;AACA,SAAQC,IAAR,QAAmB,UAAnB;AAEA,MAAMC,GAAG,GAAGZ,MAAM,CAACa,GAAI;AACvB;AACA;AACA;AACA;AACA,6BAA6BZ,MAAM,CAACa,WAAY;AAChD;AACA;AACA;AACA,WAAWb,MAAM,CAACc,WAAY;AAC9B,sBAAsBd,MAAM,CAACe,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBf,MAAM,CAACgB,UAAW;AAC1C,aAAahB,MAAM,CAACiB,WAAY;AAChC;AACA;AACA;AACA,wBAAwBjB,MAAM,CAACkB,WAAY;AAC3C,aAAalB,MAAM,CAACmB,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAenB,MAAM,CAACoB,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQhB,iBAAiB,CAACH,kBAAkB,CAACoB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQlB,iBAAiB,CAACF,kBAAkB,CAACoB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQnB,iBAAiB,CAACD,kBAAkB,CAACoB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AA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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\n\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\n\nconst Row = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  position: relative;\n\n  color: ${COLORS.neutral_600};\n  background-color: ${COLORS.white};\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    box-shadow: none;\n  }\n\n  &.interactive:focus {\n    outline: none;\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    z-index: 1;\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note {\n    color: ${COLORS.neutral_600};\n    word-break: initial;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ${COLORS.neutral_600};\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n`;\n\n\ntype Props = {\n  size?: Size;\n  variant?: 'normal' | 'overlay';\n  icon?: React.ReactNode;\n  mainText: string;\n  secondaryText?: string;\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n  note?: string;\n  noteTooltip?: string;\n  disabled?: boolean;\n  action?: () => void;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n                                                   size = Size.Medium,\n                                                   variant = 'normal',\n                                                   icon,\n                                                   mainText,\n                                                   secondaryText,\n                                                   dropdown,\n                                                   note,\n                                                   noteTooltip,\n                                                   disabled = false,\n                                                   action\n                                                 }: Props) => {\n\n  const [inAction, setInAction] = React.useState<Boolean>(false);\n\n  const handleKeyPress = (e: any) => {\n    if (e.key === 'Enter') {\n      action && action()\n    }\n  }\n\n  const rowClassName = (inAction ? 'in-action ' : '')\n    .concat(disabled ? 'disabled ' : '')\n    .concat(!!action ? 'interactive ' : '')\n    .concat('list-item-row ')\n    .concat(`${variant} `)\n    .concat(`${size}`);\n\n  return (\n    <Row tabIndex={!!action && !disabled ? 0 : undefined}\n         className={rowClassName}\n         onKeyPress={(e) => !disabled && handleKeyPress(e)}\n         onClick={e => {\n           !disabled && action && action();\n         }}\n         data-hj-suppress>\n      {\n        !!icon &&\n        <div className={'list-item-icon'}>{icon}</div>\n      }\n      <div className={'list-item-content'}>\n        <div className={'list-item-main-text'}>{mainText}</div>\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n      </div>\n      {\n        !!note &&\n        <>\n          {\n            !!noteTooltip &&\n            <div className={'list-item-note with-tooltip'}>\n              <TooltipWrapper label={noteTooltip}\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n                              position={'top'}\n                              withArrow={true}>\n                {note}\n              </TooltipWrapper>\n            </div>\n          }\n          {\n            !noteTooltip &&\n            <div className={'list-item-note'}>\n              {note}\n            </div>\n          }\n        </>\n      }\n      {\n        !!dropdown &&\n        <div className={'list-item-actions'}\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\n             onMouseLeave={() => setInAction(false)}>\n          <DropdownButton {...dropdown}\n                          disabled={disabled || dropdown.disabled}\n                          icon={variant === 'overlay'\n                            ? <SystemIcons.ArrowDropDown/>\n                            : <SystemIcons.MoreVertical/>}\n          />\n        </div>\n      }\n    </Row>\n  );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.js"}
+{"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","DropdownButton","SystemIcons","Size","Z_INDEXES","Row","div","neutral_100","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","focus","neutral_300","Regular","ListRow","size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","inAction","setInAction","useState","handleKeyPress","e","key","rowClassName","concat","undefined","Large","Small","XSmall"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,WAAzC;AAEA,SACEC,iBADF,EAEEC,iBAFF,EAGEC,iBAHF,EAIEC,kBAJF,EAKEC,mBALF,QAMO,sBANP;AAQA,SAAQC,cAAR,QAA6B,aAA7B;AACA,SAAQC,cAAR,QAA6B,aAA7B;AACA,SAAQC,WAAR,QAA0B,UAA1B;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA,SAAQC,SAAR,QAAwB,qBAAxB;AAEA,MAAMC,GAAG,GAAGb,MAAM,CAACc,GAAI;AACvB;AACA;AACA;AACA;AACA,6BAA6Bb,MAAM,CAACc,WAAY;AAChD;AACA;AACA;AACA,WAAWd,MAAM,CAACe,WAAY;AAC9B,sBAAsBf,MAAM,CAACgB,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBhB,MAAM,CAACiB,UAAW;AAC1C,aAAajB,MAAM,CAACkB,WAAY;AAChC,eAAeP,SAAS,CAACQ,KAAM;AAC/B;AACA;AACA;AACA,wBAAwBnB,MAAM,CAACoB,WAAY;AAC3C,aAAapB,MAAM,CAACqB,WAAY;AAChC;AACA,eAAeV,SAAS,CAACW,MAAO;AAChC;AACA;AACA;AACA;AACA;AACA,eAAeX,SAAS,CAACY,KAAM;AAC/B;AACA;AACA;AACA;AACA,eAAevB,MAAM,CAACwB,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQpB,iBAAiB,CAACH,kBAAkB,CAACwB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQtB,iBAAiB,CAACF,kBAAkB,CAACwB,OAApB,EAA6B,IAA7B,CAAmC;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;A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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\n\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst Row = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  position: relative;\n\n  color: ${COLORS.neutral_600};\n  background-color: ${COLORS.white};\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    box-shadow: none;\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.interactive:focus {\n    outline: none;\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    z-index: ${Z_INDEXES.focus};\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note {\n    color: ${COLORS.neutral_600};\n    word-break: initial;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ${COLORS.neutral_600};\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n`;\n\n\ntype Props = {\n  size?: Size;\n  variant?: 'normal' | 'overlay';\n  icon?: React.ReactNode;\n  mainText: string;\n  secondaryText?: string;\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n  note?: string;\n  noteTooltip?: string;\n  disabled?: boolean;\n  action?: () => void;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n                                                   size = Size.Medium,\n                                                   variant = 'normal',\n                                                   icon,\n                                                   mainText,\n                                                   secondaryText,\n                                                   dropdown,\n                                                   note,\n                                                   noteTooltip,\n                                                   disabled = false,\n                                                   action\n                                                 }: Props) => {\n\n  const [inAction, setInAction] = React.useState<Boolean>(false);\n\n  const handleKeyPress = (e: any) => {\n    if (e.key === 'Enter') {\n      action && action()\n    }\n  }\n\n  const rowClassName = (inAction ? 'in-action ' : '')\n    .concat(disabled ? 'disabled ' : '')\n    .concat(!!action ? 'interactive ' : '')\n    .concat('list-item-row ')\n    .concat(`${variant} `)\n    .concat(`${size}`);\n\n  return (\n    <Row tabIndex={!!action && !disabled ? 0 : undefined}\n         className={rowClassName}\n         onKeyPress={(e) => !disabled && handleKeyPress(e)}\n         onClick={e => {\n           !disabled && action && action();\n         }}\n         data-hj-suppress>\n      {\n        !!icon &&\n        <div className={'list-item-icon'}>{icon}</div>\n      }\n      <div className={'list-item-content'}>\n        <div className={'list-item-main-text'}>{mainText}</div>\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n      </div>\n      {\n        !!note &&\n        <>\n          {\n            !!noteTooltip &&\n            <div className={'list-item-note with-tooltip'}>\n              <TooltipWrapper label={noteTooltip}\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n                              position={'top'}\n                              withArrow={true}>\n                {note}\n              </TooltipWrapper>\n            </div>\n          }\n          {\n            !noteTooltip &&\n            <div className={'list-item-note'}>\n              {note}\n            </div>\n          }\n        </>\n      }\n      {\n        !!dropdown &&\n        <div className={'list-item-actions'}\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\n             onMouseLeave={() => setInAction(false)}>\n          <DropdownButton {...dropdown}\n                          disabled={disabled || dropdown.disabled}\n                          icon={variant === 'overlay'\n                            ? <SystemIcons.ArrowDropDown/>\n                            : <SystemIcons.MoreVertical/>}\n          />\n        </div>\n      }\n    </Row>\n  );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.js"}

package/dist/esm/LoadingIndicator/LoadingIndicator.js

@@ -2,6 +2,7 @@ import _pt from "prop-types";
 import * as React from 'react';
 import styled from 'styled-components';
 import { COLORS } from '../styles';
+import { Size } from '../types';
 import { LoadingMedium, LoadingSmall } from '../icons/systemicons/SystemIcons';
 const LoadingWrapper = styled.div`
   height: 100%;
@@ -27,16 +28,16 @@ const LoadingWrapper = styled.div`
 `;
 
 const LoadingIndicator = ({
-  size = 'medium',
+  size = Size.Medium,
   color = COLORS.primary
 }) => {
   switch (size) {
-    case 'medium':
+    case Size.Medium:
       return /*#__PURE__*/React.createElement(LoadingWrapper, null, /*#__PURE__*/React.createElement(LoadingMedium, {
         color: color
       }));
 
-    case 'small':
+    case Size.Small:
       return /*#__PURE__*/React.createElement(LoadingWrapper, null, /*#__PURE__*/React.createElement(LoadingSmall, {
         color: color
       }));
@@ -49,7 +50,6 @@ const LoadingIndicator = ({
 };
 
 LoadingIndicator.propTypes = {
-  size: _pt.oneOf(['small', 'medium']),
   color: _pt.string
 };
 export default LoadingIndicator;

package/dist/esm/LoadingIndicator/LoadingIndicator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/LoadingIndicator/LoadingIndicator.tsx"],"names":["React","styled","COLORS","LoadingMedium","LoadingSmall","LoadingWrapper","div","LoadingIndicator","size","color","primary"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,aAAT,EAAwBC,YAAxB,QAA4C,kCAA5C;AAEA,MAAMC,cAAc,GAAGJ,MAAM,CAACK,GAAI;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CArBA;;AA4BA,MAAMC,gBAAgB,GAAG,CAAC;AAAEC,EAAAA,IAAI,GAAG,QAAT;AAAmBC,EAAAA,KAAK,GAAGP,MAAM,CAACQ;AAAlC,CAAD,KAAwE;AAC/F,UAAQF,IAAR;AACE,SAAK,QAAL;AACE,0BACE,oBAAC,cAAD,qBACE,oBAAC,aAAD;AAAe,QAAA,KAAK,EAAEC;AAAtB,QADF,CADF;;AAKF,SAAK,OAAL;AACE,0BACE,oBAAC,cAAD,qBACE,oBAAC,YAAD;AAAc,QAAA,KAAK,EAAEA;AAArB,QADF,CADF;;AAKF;AACE,0BACE,oBAAC,cAAD,qBACE,oBAAC,aAAD;AAAe,QAAA,KAAK,EAAEA;AAAtB,QADF,CADF;AAdJ;AAoBD,CArBD;;;AAJED,EAAAA,I,aAAO,O,EAAU,Q;AACjBC,EAAAA,K;;AA0BF,eAAeF,gBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { LoadingMedium, LoadingSmall } from '../icons/systemicons/SystemIcons';\n\nconst LoadingWrapper = styled.div`\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    animation-name: spin;\n    animation-duration: 1s;\n    animation-iteration-count: infinite;\n    transform-origin: 50% 50%;\n\n    @keyframes spin {\n      from {\n        transform: rotate(0deg);\n      }\n      to {\n        transform: rotate(360deg);\n      }\n    }\n  }\n`;\n\ntype LoadingIndicatorProps = {\n  size?: 'small' | 'medium';\n  color?: string;\n};\n\nconst LoadingIndicator = ({ size = 'medium', color = COLORS.primary }: LoadingIndicatorProps) => {\n  switch (size) {\n    case 'medium':\n      return (\n        <LoadingWrapper>\n          <LoadingMedium color={color} />\n        </LoadingWrapper>\n      );\n    case 'small':\n      return (\n        <LoadingWrapper>\n          <LoadingSmall color={color} />\n        </LoadingWrapper>\n      );\n    default:\n      return (\n        <LoadingWrapper>\n          <LoadingMedium color={color} />\n        </LoadingWrapper>\n      );\n  }\n};\n\nexport default LoadingIndicator;\n"],"file":"LoadingIndicator.js"}
+{"version":3,"sources":["../../../src/LoadingIndicator/LoadingIndicator.tsx"],"names":["React","styled","COLORS","Size","LoadingMedium","LoadingSmall","LoadingWrapper","div","LoadingIndicator","size","Medium","color","primary","Small"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAASC,aAAT,EAAwBC,YAAxB,QAA4C,kCAA5C;AAEA,MAAMC,cAAc,GAAGL,MAAM,CAACM,GAAI;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CArBA;;AA4BA,MAAMC,gBAAgB,GAAG,CAAC;AAAEC,EAAAA,IAAI,GAAGN,IAAI,CAACO,MAAd;AAAsBC,EAAAA,KAAK,GAAGT,MAAM,CAACU;AAArC,CAAD,KAA2E;AAClG,UAAQH,IAAR;AACE,SAAKN,IAAI,CAACO,MAAV;AACE,0BACE,oBAAC,cAAD,qBACE,oBAAC,aAAD;AAAe,QAAA,KAAK,EAAEC;AAAtB,QADF,CADF;;AAKF,SAAKR,IAAI,CAACU,KAAV;AACE,0BACE,oBAAC,cAAD,qBACE,oBAAC,YAAD;AAAc,QAAA,KAAK,EAAEF;AAArB,QADF,CADF;;AAKF;AACE,0BACE,oBAAC,cAAD,qBACE,oBAAC,aAAD;AAAe,QAAA,KAAK,EAAEA;AAAtB,QADF,CADF;AAdJ;AAoBD,CArBD;;;AAHEA,EAAAA,K;;AA0BF,eAAeH,gBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Size } from '../types';\nimport { LoadingMedium, LoadingSmall } from '../icons/systemicons/SystemIcons';\n\nconst LoadingWrapper = styled.div`\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    animation-name: spin;\n    animation-duration: 1s;\n    animation-iteration-count: infinite;\n    transform-origin: 50% 50%;\n\n    @keyframes spin {\n      from {\n        transform: rotate(0deg);\n      }\n      to {\n        transform: rotate(360deg);\n      }\n    }\n  }\n`;\n\ntype LoadingIndicatorProps = {\n  size?: Size.Small | Size.Medium;\n  color?: string;\n};\n\nconst LoadingIndicator = ({ size = Size.Medium, color = COLORS.primary }: LoadingIndicatorProps) => {\n  switch (size) {\n    case Size.Medium:\n      return (\n        <LoadingWrapper>\n          <LoadingMedium color={color} />\n        </LoadingWrapper>\n      );\n    case Size.Small:\n      return (\n        <LoadingWrapper>\n          <LoadingSmall color={color} />\n        </LoadingWrapper>\n      );\n    default:\n      return (\n        <LoadingWrapper>\n          <LoadingMedium color={color} />\n        </LoadingWrapper>\n      );\n  }\n};\n\nexport default LoadingIndicator;\n"],"file":"LoadingIndicator.js"}

package/dist/esm/Modals/ModalContainer.js

@@ -9,6 +9,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import * as React from 'react';
 import ReactModal from 'react-modal';
 import { BOXSHADOWS } from '../styles';
+import { Z_INDEXES } from '../styles/z-indexes';
 const ModalContainerStyles = {
   content: {
     top: '50%',
@@ -29,7 +30,7 @@ const ModalContainerStyles = {
 const modalTransitions = `
 .ReactModal__Overlay {
   opacity: 0;
-  z-index: 100;
+  z-index: ${Z_INDEXES.backdrop};
 }
 
 .ReactModal__Overlay--after-open {
@@ -38,6 +39,7 @@ const modalTransitions = `
 }
 
 .ReactModal__Content{
+  z-index: ${Z_INDEXES.modal};
   opacity:0;
   transform: translate(-50%, -50%) scale(1.1, 1.1);
 }
@@ -58,6 +60,11 @@ const modalTransitions = `
   transform: translate(-50%, -50%) scale(1.1, 1.1);
   transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);
 }
+
+.ReactModal__Body--open,
+.ReactModal__Html--open {
+  overflow: hidden;
+}
 `;
 
 class ModalContainer extends React.Component {

package/dist/esm/Modals/ModalContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Modals/ModalContainer.tsx"],"names":["React","ReactModal","BOXSHADOWS","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOW_L3","modalTransitions","ModalContainer","Component","modalHeight","modalWidth","modalOverflow","componentDidMount","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","render","id","showModal","closeModal","children","padding","minWidth","maxWidth","props","sizes","GetSize","GetOverflow","stylesConfiguration","Object","assign","styles","getElementById"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: 100;\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  modalHeight?: any;\n  modalWidth?: any;\n  modalOverflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n  }\n\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n  render() {\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '' } = this.props;\n    const sizes = this.GetSize(modalHeight, modalWidth);\n    const { height, width } = sizes;\n    const overflow = this.GetOverflow(modalOverflow);\n    const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth });\n    const styles = { content: stylesConfiguration };\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}
+{"version":3,"sources":["../../../src/Modals/ModalContainer.tsx"],"names":["React","ReactModal","BOXSHADOWS","Z_INDEXES","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOW_L3","modalTransitions","backdrop","modal","ModalContainer","Component","modalHeight","modalWidth","modalOverflow","componentDidMount","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","render","id","showModal","closeModal","children","padding","minWidth","maxWidth","props","sizes","GetSize","GetOverflow","stylesConfiguration","Object","assign","styles","getElementById"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport { BOXSHADOWS } from '../styles';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst ModalContainerStyles = {\n  content: {\n    top: '50%',\n    left: '50%',\n    right: 'auto',\n    bottom: 'auto',\n    marginRight: '-50%',\n    width: '640px',\n    height: '320px',\n    borderRadius: '8px',\n    boxSizing: 'border-box' as any,\n    margin: 0,\n    overflow: 'auto',\n    boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n  },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n  opacity: 0;\n  z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n  opacity: 1;\n  transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n  z-index: ${Z_INDEXES.modal};\n  opacity:0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n  opacity: 1;\n  transform: translate(-50%, -50%) scale(1.0, 1.0);\n  transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n  opacity: 0;\n  transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n  opacity: 0;\n  transform: translate(-50%, -50%) scale(1.1, 1.1);\n  transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n\n.ReactModal__Body--open,\n.ReactModal__Html--open {\n  overflow: hidden;\n}\n`;\n\ntype ModalContainerProps = {\n  id?: string;\n  showModal: boolean;\n  closeModal: () => void;\n  children: any;\n  modalHeight?: any;\n  modalWidth?: any;\n  modalOverflow?: string;\n  padding?: string;\n  minWidth?: string;\n  maxWidth?: string;\n};\n\ntype ModalContainerState = {};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n  componentDidMount() {\n    if (ReactModal.defaultStyles.overlay) {\n      ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n    }\n\n    //append style node to override modal transition classes\n    if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n      const head = document.head || document.getElementsByTagName('head')[0];\n      const style = document.createElement('style');\n      style.setAttribute('modal-custom-styling', 'active');\n      head.appendChild(style);\n      style.appendChild(document.createTextNode(modalTransitions));\n    }\n  }\n\n  GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({ height: modalHeight, width: modalWidth });\n  GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n  render() {\n    const { id, showModal, closeModal, children, modalHeight, modalWidth, modalOverflow, padding, minWidth = '', maxWidth = '' } = this.props;\n    const sizes = this.GetSize(modalHeight, modalWidth);\n    const { height, width } = sizes;\n    const overflow = this.GetOverflow(modalOverflow);\n    const stylesConfiguration = Object.assign({ ...ModalContainerStyles.content }, { height, width, padding, overflow, minWidth, maxWidth });\n    const styles = { content: stylesConfiguration };\n\n    return (\n      <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles} appElement={document.getElementById('root') || ''}>\n        {children}\n      </ReactModal>\n    );\n  }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}

package/dist/esm/Modals/ModalDialog.js

@@ -5,8 +5,10 @@ import { ArrowLineLeft, Close, Help } from '../icons/systemicons/SystemIcons';
 import { COLORS, ComponentL, ComponentM, ComponentTextStyle, ComponentXL } from '../styles';
 import { Size } from '../types';
 import ModalContainer from './ModalContainer';
-import { BackButtonWrapper, CloseButtonWrapper, Column, ModalBody, ModalFooter, ModalTitleSection, StyledModalHeader } from './ModalStyles';
+import { BackButtonWrapper, CloseButtonWrapper, Column, FlexContainer, ModalBody, ModalFooter, ModalHeaderActions, ModalHeaderActionsWithImage, ModalTitleSection, StyledModalHeader, ModalHoverModifier } from './ModalStyles';
 import { ModalNote } from './ModalNote';
+import { TooltipWrapper } from '../Tooltips';
+import { HyperLink } from '..';
 export const ModalDialog = ({
   size,
   isModalOpen,
@@ -14,6 +16,7 @@ export const ModalDialog = ({
   title,
   topImage,
   buttons,
+  leftFooterAction,
   backButton,
   closeAction,
   submitAction,
@@ -22,8 +25,6 @@ export const ModalDialog = ({
   note,
   state
 }) => {
-  const [tooltipOpen, setTooltipOpen] = React.useState(false);
-
   const getMinWidth = () => {
     switch (size) {
       case Size.Small:
@@ -124,6 +125,24 @@ export const ModalDialog = ({
     }
   };
 
+  const ModalTootip = tooltip => {
+    return /*#__PURE__*/React.createElement(ModalHoverModifier, null, /*#__PURE__*/React.createElement(TooltipWrapper, {
+      delay: "0s",
+      size: Size.XSmall,
+      align: "center",
+      position: "top",
+      withArrow: false,
+      label: tooltip
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      variant: "secondary",
+      shape: "circular",
+      action: () => {}
+    }, /*#__PURE__*/React.createElement(Help, {
+      size: "24px",
+      color: COLORS.neutral_600
+    }))));
+  };
+
   const ModalCloseButton = onClick => {
     return /*#__PURE__*/React.createElement(CloseButtonWrapper, {
       hasImage: !!topImage,
@@ -156,9 +175,54 @@ export const ModalDialog = ({
     }
   };
 
-  buttons?.reverse();
-  const lastLeftButton = buttons?.find(a => a.position === 'left');
-  buttons?.reverse();
+  const getLeftActionIconElement = icon => {
+    return /*#__PURE__*/React.cloneElement(icon, {
+      size: size === Size.Small ? '20px' : size === Size.Large ? '28px' : '24px'
+    });
+  };
+
+  const LeftFooterAction = leftFooterAction => {
+    const {
+      text,
+      actionType,
+      disabled,
+      icon,
+      action
+    } = leftFooterAction;
+
+    switch (actionType) {
+      case 'button':
+        return /*#__PURE__*/React.createElement(Button, {
+          id: 'left-action-button',
+          type: leftFooterAction?.type,
+          disabled: disabled,
+          loading: leftFooterAction?.loading,
+          icon: icon,
+          size: size,
+          onClick: action,
+          variant: leftFooterAction?.variant ?? 'secondary',
+          style: {
+            order: -1,
+            marginRight: 'auto'
+          }
+        }, text);
+
+      case 'hyperlink':
+        return /*#__PURE__*/React.createElement(HyperLink, {
+          id: "left-action-hyperlink",
+          className: "footer-action",
+          href: leftFooterAction.href,
+          disabled: disabled,
+          variant: "default"
+        }, icon && getLeftActionIconElement(icon), text);
+
+      case 'note':
+        return /*#__PURE__*/React.createElement("div", {
+          className: "footer-action note"
+        }, icon && getLeftActionIconElement(icon), /*#__PURE__*/React.createElement("span", null, text));
+    }
+  };
+
   return /*#__PURE__*/React.createElement(ModalContainer, {
     showModal: isModalOpen,
     closeModal: closeModalAndClearInput,
@@ -175,15 +239,9 @@ export const ModalDialog = ({
   }, /*#__PURE__*/React.createElement("img", {
     src: topImage,
     alt: "Modal top"
-  }), ModalBackButton(), ModalCloseButton(closeAction)), /*#__PURE__*/React.createElement(ModalTitleSection, null, !topImage && ModalBackButton(), title && ModalTitle(title, size), tooltip && /*#__PURE__*/React.createElement("div", {
-    id: "tooltip"
-  }, /*#__PURE__*/React.createElement("div", {
-    onMouseOver: () => setTooltipOpen(true),
-    onMouseOut: () => setTooltipOpen(false)
-  }, /*#__PURE__*/React.createElement(Help, {
-    size: "24px",
-    color: COLORS.neutral_600
-  })), tooltipOpen && /*#__PURE__*/React.createElement("span", null, tooltip)), !topImage && ModalCloseButton(closeAction)), /*#__PURE__*/React.createElement(ModalBody, {
+  }), /*#__PURE__*/React.createElement(ModalHeaderActionsWithImage, {
+    hasBackButton: !!backButton
+  }, ModalBackButton(), ModalCloseButton(closeAction))), /*#__PURE__*/React.createElement(ModalTitleSection, null, /*#__PURE__*/React.createElement(FlexContainer, null, !topImage && ModalBackButton(), title && ModalTitle(title, size)), /*#__PURE__*/React.createElement(ModalHeaderActions, null, tooltip && ModalTootip(tooltip), !topImage && ModalCloseButton(closeAction))), /*#__PURE__*/React.createElement(ModalBody, {
     size: size
   }, children), note && /*#__PURE__*/React.createElement(ModalNote, {
     note: note,
@@ -191,7 +249,7 @@ export const ModalDialog = ({
     size: size
   }), /*#__PURE__*/React.createElement(ModalFooter, {
     size: size
-  }, buttons?.map((b, i) => /*#__PURE__*/React.createElement(Button, {
+  }, leftFooterAction && LeftFooterAction(leftFooterAction), buttons?.map((b, i) => /*#__PURE__*/React.createElement(Button, {
     key: b.id || i,
     id: b.id,
     disabled: b.disabled,
@@ -199,11 +257,7 @@ export const ModalDialog = ({
     size: size,
     onClick: b.action,
     type: b.type,
-    variant: b.variant,
-    style: b.position === 'left' ? {
-      order: -1,
-      marginRight: b === lastLeftButton ? 'auto' : undefined
-    } : undefined
+    variant: b.variant
   }, b.text))))));
 };
 ModalDialog.propTypes = {
@@ -211,11 +265,7 @@ ModalDialog.propTypes = {
   closeModalAndClearInput: _pt.any.isRequired,
   title: _pt.string,
   topImage: _pt.any,
-  buttons: _pt.arrayOf(_pt.shape({
-    action: _pt.oneOfType([_pt.func, _pt.func]),
-    text: _pt.string.isRequired,
-    position: _pt.oneOf(['left', 'right'])
-  })),
+  buttons: _pt.array,
   tooltip: _pt.string,
   backButton: _pt.func,
   closeAction: _pt.func.isRequired,