@laerdal/life-react-components 3.5.1-dev.16 → 3.5.1-dev.18

package/dist/esm/InputFields/RadioButton.js

@@ -1,187 +0,0 @@
-import _pt from "prop-types";
-import * as React from 'react';
-import styled from 'styled-components';
-import { RadioButtonOff, RadioButtonOn } from '../icons/systemicons/SystemIcons';
-import { COLORS, ComponentTextStyle } from '../styles';
-import { Size } from '../types';
-import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling } from '../styles/typography';
-const StyledRadioButton = styled.div`
-  display: flex;
-  width: 100%;
-  min-height: 48px;
-  min-width: 48px;
-
-  ${props => props.margin ? `margin: ${props.margin};` : ''}
-  cursor: pointer;
- 
-  color: ${COLORS.black};
-
-  .pointerTransparent {
-    pointer-events: none;
-  }
-
-  .radio-button-icon {
-    margin: 6px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    height: 36px;
-    min-width: 36px;
-    border-radius: 50%;
-
-    svg {
-      color: ${props => props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600};
-    }
-  }
-
-  .radio-button-label {
-    user-select: none;
-    display: flex;
-    flex-direction: column;
-
-    label{
-      cursor: inherit;
-    }
-
-    span {
-      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}
-    }
-  }
-
-  &.small {
-    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}
-    .radio-button-label {
-      padding-top: 14px;
-    }
-  }
-
-  &.medium {
-    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
-    .radio-button-label {
-      padding-top: 12px;
-    }
-  }
-
-  &.large {
-    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}
-    .radio-button-label {
-      padding-top: 12px;
-    }
-  }
-
-  &:not(.disabled):focus {
-    outline: none;
-
-    .radio-button-icon {
-      background-color: ${COLORS.white};
-      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
-
-      svg {
-        color: ${COLORS.neutral_600};
-      }
-    }
-  }
-
-  &:not(.disabled):hover {
-    .radio-button-icon {
-      background-color: ${COLORS.primary_20};
-
-      svg {
-        color: ${COLORS.primary_700};
-      }
-    }
-  }
-
-  &:not(.disabled):active {
-    .radio-button-icon {
-      background: ${COLORS.primary_100};
-      box-shadow: none;
-
-      svg {
-        color: ${COLORS.primary_800};
-      }
-    }
-  }
-
-  &.disabled {
-    box-shadow: none;
-    cursor: not-allowed;
-
-    color: ${COLORS.neutral_300};
-
-    .radio-button-icon,
-    .radio-button-label {
-      pointer-events: none;
-    }
-
-    .radio-button-icon{
-      background-color: ${COLORS.white};
-    }
-    
-    .radio-button-icon svg {
-      color: ${COLORS.neutral_300};
-    }
-  }
-`;
-const RadioButton = /*#__PURE__*/React.forwardRef(({
-  id,
-  selected,
-  label,
-  additionalLabel,
-  showWarning,
-  select,
-  disabled,
-  margin,
-  iconPointerEventsTransparent,
-  size,
-  tabIndexVal
-}, ref) => {
-  const onKeyPress = e => {
-    if (e.keyCode === 13 && !disabled) {
-      select(!selected);
-    }
-  };
-
-  size = size ?? Size.Medium;
-  return /*#__PURE__*/React.createElement(StyledRadioButton, {
-    key: id,
-    margin: margin,
-    ref: ref,
-    onClick: () => !disabled && select(!selected),
-    onMouseDown: e => e.preventDefault(),
-    onKeyDown: onKeyPress,
-    disabled: disabled,
-    className: size.toString().toLowerCase().concat(disabled ? ' disabled' : ''),
-    tabIndex: disabled ? -1 : tabIndexVal ? tabIndexVal : 0,
-    showWarning: showWarning,
-    selected: selected
-  }, /*#__PURE__*/React.createElement("div", {
-    className: 'radio-button-icon',
-    id: id
-  }, selected && /*#__PURE__*/React.createElement(RadioButtonOn, {
-    className: iconPointerEventsTransparent ? "pointerTransparent" : "",
-    size: "24px"
-  }), !selected && /*#__PURE__*/React.createElement(RadioButtonOff, {
-    className: iconPointerEventsTransparent ? "pointerTransparent" : "",
-    size: "24px"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: 'radio-button-label'
-  }, label && /*#__PURE__*/React.createElement("label", {
-    htmlFor: id
-  }, label), additionalLabel !== undefined && /*#__PURE__*/React.createElement("span", null, additionalLabel)));
-});
-RadioButton.propTypes = {
-  id: _pt.string.isRequired,
-  selected: _pt.bool.isRequired,
-  select: _pt.func.isRequired,
-  label: _pt.string,
-  additionalLabel: _pt.string,
-  showWarning: _pt.bool,
-  disabled: _pt.bool,
-  iconPointerEventsTransparent: _pt.bool,
-  margin: _pt.string,
-  tabIndexVal: _pt.number
-};
-export default RadioButton;
-//# sourceMappingURL=RadioButton.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/InputFields/RadioButton.tsx"],"names":["React","styled","RadioButtonOff","RadioButtonOn","COLORS","ComponentTextStyle","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","StyledRadioButton","div","props","margin","black","selected","primary_500","showWarning","warning_400","neutral_600","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","RadioButton","forwardRef","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","ref","onKeyPress","e","keyCode","Medium","preventDefault","toString","toLowerCase","concat","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled, {css} from 'styled-components';\r\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\r\nimport {COLORS, ComponentTextStyle} from '../styles';\r\nimport { Size } from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\r\n\r\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, showWarning?: boolean, selected?: boolean }>`\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n\r\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\r\n  cursor: pointer;\r\n \r\n  color: ${COLORS.black};\r\n\r\n  .pointerTransparent {\r\n    pointer-events: none;\r\n  }\r\n\r\n  .radio-button-icon {\r\n    margin: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    height: 36px;\r\n    min-width: 36px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\r\n    }\r\n  }\r\n\r\n  .radio-button-label {\r\n    user-select: none;\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    label{\r\n      cursor: inherit;\r\n    }\r\n\r\n    span {\r\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .radio-button-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .radio-button-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .radio-button-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):focus {\r\n    outline: none;\r\n\r\n    .radio-button-icon {\r\n      background-color: ${COLORS.white};\r\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\r\n\r\n      svg {\r\n        color: ${COLORS.neutral_600};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):hover {\r\n    .radio-button-icon {\r\n      background-color: ${COLORS.primary_20};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_700};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):active {\r\n    .radio-button-icon {\r\n      background: ${COLORS.primary_100};\r\n      box-shadow: none;\r\n\r\n      svg {\r\n        color: ${COLORS.primary_800};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    box-shadow: none;\r\n    cursor: not-allowed;\r\n\r\n    color: ${COLORS.neutral_300};\r\n\r\n    .radio-button-icon,\r\n    .radio-button-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .radio-button-icon{\r\n      background-color: ${COLORS.white};\r\n    }\r\n    \r\n    .radio-button-icon svg {\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n`;\r\n\r\ninterface Props {\r\n  id: string;\r\n  selected: boolean;\r\n  select: (selected: boolean) => void;\r\n  label?: string;\r\n  additionalLabel?: string;\r\n  showWarning?: boolean;\r\n  disabled?: boolean;\r\n  iconPointerEventsTransparent?: boolean;\r\n  margin?: string;\r\n  size?: Size;\r\n  tabIndexVal?: number;\r\n}\r\n\r\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\r\n  id,\r\n  selected,\r\n  label,\r\n  additionalLabel,\r\n  showWarning,\r\n  select,\r\n  disabled,\r\n  margin,\r\n  iconPointerEventsTransparent,\r\n  size,\r\n  tabIndexVal\r\n}: Props, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled) {\r\n      select(!selected);\r\n    }\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  return (\r\n    <StyledRadioButton key={id} margin={margin}\r\n                       ref={ref}\r\n                       onClick={() => !disabled && select(!selected)}\r\n                       onMouseDown={e => e.preventDefault()}\r\n                       onKeyDown={onKeyPress}\r\n                       disabled={disabled}\r\n                       className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\r\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                       showWarning={showWarning}\r\n                       selected={selected}>\r\n      <div className={'radio-button-icon'} id={id}>\r\n        { selected && <RadioButtonOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\r\n        { !selected && <RadioButtonOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\r\n      </div>\r\n      <div className={'radio-button-label'}>\r\n        {label && <label htmlFor={id}>{label}</label>}\r\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\r\n      </div>\r\n    </StyledRadioButton>\r\n  );\r\n});\r\n\r\nexport default RadioButton;\r\n"],"file":"RadioButton.js"}

package/dist/esm/InputFields/ResponsiveComponentWrapper.js

@@ -1,38 +0,0 @@
-import _pt from "prop-types";
-
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-import { Size } from '../types';
-/**
- * Import custom styles.
- */
-
-import { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles'; // Add component-specific types
-
-const ReponsiveComponentWrapper = ({
-  children,
-  size
-}) => {
-  // Globally used variables within the component
-  const [isMediumView, setIsMediumView] = React.useState(false);
-  React.useEffect(() => {
-    const handleResize = () => {
-      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);
-      setIsMediumView(mql.matches);
-    };
-
-    window.addEventListener('resize', handleResize);
-    return function cleanup() {
-      window.removeEventListener('resize', handleResize);
-    };
-  });
-  return size && size === Size.Medium ? /*#__PURE__*/React.createElement(ComponentXS, null, children) : size && size === Size.Small ? /*#__PURE__*/React.createElement(ComponentXXS, null, children) : isMediumView ? /*#__PURE__*/React.createElement(ComponentXS, null, children) : /*#__PURE__*/React.createElement(ComponentXXS, null, children);
-};
-
-ReponsiveComponentWrapper.propTypes = {
-  children: _pt.any
-};
-export default ReponsiveComponentWrapper;
-//# sourceMappingURL=ResponsiveComponentWrapper.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/InputFields/ResponsiveComponentWrapper.tsx"],"names":["React","Size","BREAKPOINTS","ComponentXXS","ComponentXS","ReponsiveComponentWrapper","children","size","isMediumView","setIsMediumView","useState","useEffect","handleResize","mql","window","matchMedia","MEDIUM","replace","matches","addEventListener","cleanup","removeEventListener","Medium","Small"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,QAAqB,UAArB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,YAAtB,EAAoCC,WAApC,QAAuD,WAAvD,C,CAEA;;AAMA,MAAMC,yBAA8D,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAAD,KAAoC;AACzG;AACA,QAAM,CAACC,YAAD,EAAeC,eAAf,IAAkCT,KAAK,CAACU,QAAN,CAAwB,KAAxB,CAAxC;AAEAV,EAAAA,KAAK,CAACW,SAAN,CAAgB,MAAM;AACpB,UAAMC,YAAY,GAAG,MAAM;AACzB,YAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,CAAmB,GAAEb,WAAW,CAACc,MAAZ,CAAmBC,OAAnB,CAA2B,SAA3B,EAAsC,EAAtC,CAA0C,EAA/D,CAAZ;AACAR,MAAAA,eAAe,CAACI,GAAG,CAACK,OAAL,CAAf;AACD,KAHD;;AAIAJ,IAAAA,MAAM,CAACK,gBAAP,CAAwB,QAAxB,EAAkCP,YAAlC;AACA,WAAO,SAASQ,OAAT,GAAmB;AACxBN,MAAAA,MAAM,CAACO,mBAAP,CAA2B,QAA3B,EAAqCT,YAArC;AACD,KAFD;AAGD,GATD;AAWA,SAAOL,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACqB,MAAtB,gBACL,oBAAC,WAAD,QAAchB,QAAd,CADK,GAEHC,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACsB,KAAtB,gBACF,oBAAC,YAAD,QAAejB,QAAf,CADE,GAEAE,YAAY,gBACd,oBAAC,WAAD,QAAcF,QAAd,CADc,gBAGd,oBAAC,YAAD,QAAeA,QAAf,CAPF;AASD,CAxBD;;;AAHEA,EAAAA,Q;;AA6BF,eAAeD,yBAAf","sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\r\n\r\n// Add component-specific types\r\ntype LabelProps = {\r\n  size?: Size.Small | Size.Medium;\r\n  children?: any;\r\n};\r\n\r\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\r\n  // Globally used variables within the component\r\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\r\n\r\n  React.useEffect(() => {\r\n    const handleResize = () => {\r\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\r\n      setIsMediumView(mql.matches);\r\n    };\r\n    window.addEventListener('resize', handleResize);\r\n    return function cleanup() {\r\n      window.removeEventListener('resize', handleResize);\r\n    };\r\n  });\r\n\r\n  return size && size === Size.Medium ? (\r\n    <ComponentXS>{children}</ComponentXS>\r\n  ) : size && size === Size.Small ? (\r\n    <ComponentXXS>{children}</ComponentXXS>\r\n  ) : isMediumView ? (\r\n    <ComponentXS>{children}</ComponentXS>\r\n  ) : (\r\n    <ComponentXXS>{children}</ComponentXXS>\r\n  );\r\n};\r\n\r\nexport default ReponsiveComponentWrapper;\r\n"],"file":"ResponsiveComponentWrapper.js"}

package/dist/esm/InputFields/SearchBar.js

@@ -1,112 +0,0 @@
-import _pt from "prop-types";
-import React from 'react';
-import { COLORS } from '../styles/index';
-import { Search as SearchIcon, Clear as ClearIcon, TechnicalWarning } from '../icons/systemicons/SystemIcons';
-import { WarningMessage, InputWrapper, SearchIconWrapper } from './styling';
-import { IconButton } from '../Button';
-import SearchBarInput from './components/SearchBarInput';
-import SearchField from './components/SearchField';
-import styled from 'styled-components';
-const ClearIconWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  
-  &.hidden{
-    display: none !important;
-  }
-`;
-
-const SearchBar = ({
-  id,
-  searchTerm,
-  setSearchTerm,
-  enterSearch,
-  removeSearch,
-  placeholder,
-  performSearchLabel,
-  disabled,
-  validationMessage,
-  onKeyDown,
-  size,
-  margin = '4px 0'
-}) => {
-  const inputRef = React.useRef(null);
-  const [tabbedHere, setTabbedHere] = React.useState(false);
-
-  const isPressingEnter = e => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      e.stopPropagation();
-      return true;
-    }
-
-    return false;
-  };
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputWrapper, {
-    disabled: disabled,
-    margin: margin
-  }, /*#__PURE__*/React.createElement(SearchField, {
-    id: `${id}_main`,
-    size: size || '',
-    searchTerm: searchTerm,
-    disabled: disabled,
-    tabbedHere: tabbedHere,
-    validationMessage: validationMessage
-  }, /*#__PURE__*/React.createElement(SearchBarInput, {
-    placeholder: disabled ? '' : placeholder,
-    ref: inputRef,
-    id: id,
-    size: size,
-    disabled: disabled,
-    setTabbedHere: setTabbedHere,
-    setSearchTerm: term => setSearchTerm(term),
-    searchTerm: searchTerm,
-    onKeyDown: onKeyDown,
-    enterSearch: enterSearch
-  }), /*#__PURE__*/React.createElement(SearchIconWrapper, {
-    className: size ? size : '',
-    "aria-label": performSearchLabel
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    id: `${id}_Search`,
-    variant: "secondary",
-    shape: "circular",
-    action: enterSearch,
-    disabled: disabled,
-    onKeyPress: e => isPressingEnter(e) ? enterSearch(e) : null
-  }, /*#__PURE__*/React.createElement(SearchIcon, {
-    size: "24px"
-  }))), /*#__PURE__*/React.createElement(ClearIconWrapper, {
-    className: (size ? size : '').concat(!searchTerm ? ' hidden' : '')
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    id: `${id}_Clear`,
-    variant: "secondary",
-    shape: "circular",
-    action: removeSearch,
-    disabled: disabled,
-    onKeyPress: e => isPressingEnter(e) ? removeSearch(e) : null
-  }, /*#__PURE__*/React.createElement(ClearIcon, {
-    size: "24px"
-  }))))), validationMessage && /*#__PURE__*/React.createElement(WarningMessage, {
-    className: size || ''
-  }, /*#__PURE__*/React.createElement(TechnicalWarning, {
-    color: COLORS.warning_400,
-    className: size || ''
-  }), /*#__PURE__*/React.createElement("span", null, validationMessage)));
-};
-
-SearchBar.propTypes = {
-  id: _pt.string.isRequired,
-  searchTerm: _pt.string,
-  setSearchTerm: _pt.func.isRequired,
-  enterSearch: _pt.func.isRequired,
-  removeSearch: _pt.func.isRequired,
-  placeholder: _pt.string,
-  performSearchLabel: _pt.string,
-  disabled: _pt.bool,
-  validationMessage: _pt.string,
-  onKeyDown: _pt.func,
-  margin: _pt.string
-};
-export default SearchBar;
-//# sourceMappingURL=SearchBar.js.map

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

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

package/dist/esm/InputFields/TextField.js

@@ -1,99 +0,0 @@
-import _pt from "prop-types";
-import * as React from 'react';
-import { TechnicalWarning } from '../icons/systemicons/SystemIcons';
-import { COLORS } from '../styles';
-import { ErrorMessage, InputFieldStyling, InputWrapper, WarningMessage } from './styling';
-
-const TextField = ({
-  id,
-  disabled,
-  locked,
-  onChange,
-  hasError,
-  value,
-  validationMessage,
-  validationIsCritical,
-  type,
-  autoComplete,
-  placeholder,
-  required,
-  correct,
-  pattern,
-  maxLength,
-  withoutBorder,
-  size,
-  margin = '4px 0'
-}) => {
-  const supressFocusRef = React.useRef(null);
-  const [tabbedHere, setTabbedHere] = React.useState(false);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputWrapper, {
-    locked: locked,
-    disabled: disabled,
-    margin: margin,
-    onClick: e => {
-      if (disabled || locked) {
-        e.preventDefault();
-      }
-    }
-  }, /*#__PURE__*/React.createElement(InputFieldStyling, {
-    id: id,
-    type: type || 'text',
-    value: value,
-    className: (hasError ? 'error' : '').concat(size ? size : ''),
-    tabIndex: locked || disabled ? -1 : 0,
-    autoComplete: autoComplete,
-    placeholder: placeholder,
-    disabled: disabled,
-    locked: locked,
-    onChange: e => onChange && onChange(e?.target?.value || ''),
-    activeValidationMessage: validationMessage !== '' && validationMessage !== undefined,
-    activeErrorMessage: validationMessage !== '' && validationMessage !== undefined && validationIsCritical,
-    required: required,
-    correctInput: correct,
-    tabbedHere: tabbedHere,
-    pattern: pattern,
-    maxLength: maxLength,
-    onBlur: () => setTabbedHere(false),
-    withoutBorder: withoutBorder,
-    onMouseDown: e => {
-      if (!(locked || disabled) && !tabbedHere) supressFocusRef.current = true;
-    },
-    onFocus: e => {
-      if (!(locked || disabled)) {
-        if (!supressFocusRef.current) setTabbedHere(true);else supressFocusRef.current = false;
-      }
-    }
-  })), validationMessage && !validationIsCritical && /*#__PURE__*/React.createElement(WarningMessage, {
-    className: size || ''
-  }, /*#__PURE__*/React.createElement(TechnicalWarning, {
-    size: "20px",
-    color: COLORS.warning_400
-  }), /*#__PURE__*/React.createElement("span", null, validationMessage)), validationMessage && validationIsCritical && /*#__PURE__*/React.createElement(ErrorMessage, {
-    className: size || ''
-  }, /*#__PURE__*/React.createElement(TechnicalWarning, {
-    size: "20px",
-    color: COLORS.critical_400
-  }), /*#__PURE__*/React.createElement("span", null, validationMessage)));
-};
-
-TextField.propTypes = {
-  id: _pt.string.isRequired,
-  disabled: _pt.bool,
-  locked: _pt.bool,
-  onChange: _pt.func,
-  hasError: _pt.bool,
-  value: _pt.string,
-  validationMessage: _pt.string,
-  validationIsCritical: _pt.bool,
-  type: _pt.string,
-  autoComplete: _pt.string,
-  placeholder: _pt.string,
-  required: _pt.bool,
-  correct: _pt.bool,
-  pattern: _pt.string,
-  maxLength: _pt.number,
-  withoutBorder: _pt.bool,
-  margin: _pt.string
-};
-export default TextField;
-//# sourceMappingURL=TextField.js.map

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

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

package/dist/esm/InputFields/Textarea.js

@@ -1,137 +0,0 @@
-import _pt from "prop-types";
-
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-/**
- * Import custom styles.
- */
-
-import { COLORS } from '../styles';
-import { ErrorMessage, WarningMessage } from './styling';
-
-/**
- * Import custom components.
- */
-import { TechnicalWarning } from '../icons/systemicons/SystemIcons';
-/**
- * Import third-party libraries.
- */
-
-import styled from 'styled-components';
-import { ComponentMStyling, ComponentTextStyle } from '../styles/typography'; // Add component-specific styles.
-
-const TextareaWrapper = styled.div`
-  width: 100%;
-  ${props => props.margin ? `margin: ${props.margin};` : ''}
-`;
-const TextArea = styled.textarea`
-  border: 1px solid ${COLORS.neutral_400};
-  background: ${COLORS.white};
-  border-radius: 4px;
-  outline: none;
-  margin: 1px;
-  padding: 16px;
-
-  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}
-
-  &.small {
-    width: 304px;
-  }
-
-  &.medium {
-    width: 344px;
-  }
-
-  &:hover {
-    border: 2px solid ${COLORS.primary_700};
-    margin: 0px;
-  }
-
-  &:active,
-  &:focus {
-    border: 2px solid ${COLORS.primary_800};
-    margin: 0px;
-    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};
-  }
-
-  &.warning,
-  &.warning:hover,
-  &.warning:focus,
-  &.warning:active {
-    border: none;
-    margin: 1px;
-    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};
-    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};
-    box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};
-  }
-
-  &.error,
-  &.error:hover,
-  &.error:focus,
-  &.error:active {
-    border: none;
-    margin: 1px;
-    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};
-    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};
-    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};
-  }
-
-  &:disabled,
-  &:disabled:hover,
-  &:disabled:focus {
-    cursor: not-allowed;
-    border: 1px solid ${COLORS.neutral_100};
-    margin: 1px;
-    box-shadow: none;
-
-    &::placeholder {
-      color: ${COLORS.neutral_300};
-    }
-  }
-
-  &::placeholder {
-    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
-  }
-`; // Add component-specific types
-
-const Textarea = ({
-  id,
-  placeholder,
-  value,
-  size,
-  disabled,
-  validationType,
-  validationMessage,
-  onChange,
-  margin
-}) => {
-  return /*#__PURE__*/React.createElement(TextareaWrapper, null, /*#__PURE__*/React.createElement(TextArea, {
-    id: id,
-    value: value,
-    placeholder: placeholder,
-    className: `${size} ${validationType}`,
-    disabled: disabled,
-    onChange: e => onChange && onChange(e?.target?.value || '')
-  }), validationMessage && validationType === 'warning' && /*#__PURE__*/React.createElement(WarningMessage, null, /*#__PURE__*/React.createElement(TechnicalWarning, {
-    size: "20px",
-    color: COLORS.warning_400
-  }), /*#__PURE__*/React.createElement("span", null, validationMessage)), validationMessage && validationType === 'error' && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(TechnicalWarning, {
-    size: "20px",
-    color: COLORS.critical_400
-  }), /*#__PURE__*/React.createElement("span", null, validationMessage)));
-};
-
-Textarea.propTypes = {
-  id: _pt.string.isRequired,
-  placeholder: _pt.string.isRequired,
-  value: _pt.string,
-  disabled: _pt.bool,
-  onChange: _pt.func,
-  validationType: _pt.oneOf(['error', 'warning']),
-  validationMessage: _pt.string,
-  margin: _pt.string
-};
-export default Textarea;
-//# sourceMappingURL=Textarea.js.map

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

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