@laerdal/life-react-components 1.9.8-dev.21 → 1.9.8-dev.24

package/dist/InputFields/PasswordField.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/PasswordField.tsx"],"names":["StyledPassSwitch","styled","div","Z_INDEXES","badge","PasswordRow","PasswordField","id","disabled","onChange","invalid","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","React","useState","passwordHidden","setPasswordHidden","inputRef","handleKeyDown","e","keyCode","display","concat","target","COLORS","critical_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS } from '../styles';\r\nimport { Size } from '../types';\r\nimport { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';\r\nimport { Z_INDEXES } from '../styles';\r\nimport { useFocusVisibleRef } from '../common';\r\nimport { IconButton } from '../Button';\r\nimport { SystemIcons } from '../icons';\r\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\r\n\r\ntype PasswordFieldProps = {\r\n  id: string;\r\n  disabled?: boolean;\r\n  onChange?: (text: string) => void;\r\n  invalid?: boolean;\r\n  value?: string;\r\n  validationMessage?: string;\r\n  autoComplete?: string;\r\n  placeholder?: string;\r\n  required?: boolean;\r\n  readOnly?: boolean;\r\n  size?: Size.Small | Size.Medium;\r\n  margin?: string;\r\n};\r\n\r\nconst StyledPassSwitch = styled.div`\r\n  z-index: ${Z_INDEXES.badge};\r\n  right: 0;\r\n  position: absolute;\r\n`;\r\n\r\nconst PasswordRow = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nconst PasswordField = ({ id, disabled, onChange, invalid, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => {\r\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\r\n  const inputRef = useFocusVisibleRef();\r\n\r\n  const handleKeyDown = (e: any) => {\r\n    if (e.keyCode === 13) {\r\n      setPasswordHidden(!passwordHidden);\r\n    }\r\n  };\r\n  return (\r\n    <>\r\n      <InputWrapper disabled={disabled} readOnly={readOnly} margin={margin}>\r\n        <div style={{ display: 'block', margin: '4px 0px'}}>\r\n          <PasswordRow>\r\n            <InputFieldStyling\r\n              id={id}\r\n              ref={inputRef}\r\n              type={passwordHidden ? 'password' : 'text'}\r\n              name=\"password\"\r\n              value={value}\r\n              className={(invalid ? 'invalid ' : '').concat(size ? size : '')}\r\n              tabIndex={disabled || readOnly ? -1 : 0}\r\n              autoComplete={autoComplete}\r\n              activeErrorMessage={!!validationMessage}\r\n              placeholder={placeholder}\r\n              disabled={disabled}\r\n              required={required}\r\n              readOnly={readOnly}\r\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n            />\r\n            <StyledPassSwitch className={size ? size : ''}>\r\n              {!disabled && !readOnly ? (\r\n                passwordHidden ? (\r\n                  <IconButton\r\n                    id={`${id}_Visible`}\r\n                    iconColor={'#666666'}\r\n                    variant={'secondary'}\r\n                    shape={'circular'}\r\n                    onKeyPress={handleKeyDown}\r\n                    action={() => setPasswordHidden(!passwordHidden)}>\r\n                    <SystemIcons.VisibleOff />\r\n                  </IconButton>\r\n                ) : (\r\n                  <IconButton\r\n                    id={`${id}_NotVisible`}\r\n                    iconColor={'#666666'}\r\n                    variant={'secondary'}\r\n                    shape={'circular'}\r\n                    onKeyPress={handleKeyDown}\r\n                    action={() => setPasswordHidden(!passwordHidden)}>\r\n                    <SystemIcons.VisibleOn />\r\n                  </IconButton>\r\n                )\r\n              ) : null}\r\n            </StyledPassSwitch>\r\n          </PasswordRow>\r\n        </div>\r\n      </InputWrapper>\r\n      {validationMessage && (\r\n        <ErrorMessage className={size || ''}>\r\n          <TechnicalWarning 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 PasswordField;\r\n"],"file":"PasswordField.cjs"}
+{"version":3,"sources":["../../src/InputFields/PasswordField.tsx"],"names":["StyledPassSwitch","styled","div","Z_INDEXES","badge","PasswordRow","PasswordField","id","disabled","onChange","invalid","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","React","useState","passwordHidden","setPasswordHidden","inputRef","handleKeyDown","e","keyCode","display","concat","target","COLORS","critical_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Size } from '../types';\nimport { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';\nimport { Z_INDEXES } from '../styles';\nimport { useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\ntype PasswordFieldProps = {\n  id: string;\n  disabled?: boolean;\n  onChange?: (text: string) => void;\n  invalid?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  z-index: ${Z_INDEXES.badge};\n  right: 0;\n  position: absolute;\n`;\n\nconst PasswordRow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst PasswordField = ({ id, disabled, onChange, invalid, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = useFocusVisibleRef();\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n  return (\n    <>\n      <InputWrapper disabled={disabled} readOnly={readOnly} margin={margin}>\n        <div style={{ display: 'block', margin: '4px 0px'}}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name=\"password\"\n              value={value}\n              className={(invalid ? 'invalid ' : '').concat(size ? size : '')}\n              tabIndex={disabled || readOnly ? -1 : 0}\n              autoComplete={autoComplete}\n              activeErrorMessage={!!validationMessage}\n              placeholder={placeholder}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !readOnly ? (\n                passwordHidden ? (\n                  <IconButton\n                    id={`${id}_Visible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOff />\n                  </IconButton>\n                ) : (\n                  <IconButton\n                    id={`${id}_NotVisible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOn />\n                  </IconButton>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default PasswordField;\n"],"file":"PasswordField.cjs"}

package/dist/InputFields/PasswordField.d.ts

@@ -1,17 +1,17 @@
-import { Size } from '../types';
-declare type PasswordFieldProps = {
-    id: string;
-    disabled?: boolean;
-    onChange?: (text: string) => void;
-    invalid?: boolean;
-    value?: string;
-    validationMessage?: string;
-    autoComplete?: string;
-    placeholder?: string;
-    required?: boolean;
-    readOnly?: boolean;
-    size?: Size.Small | Size.Medium;
-    margin?: string;
-};
-declare const PasswordField: ({ id, disabled, onChange, invalid, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => JSX.Element;
-export default PasswordField;
+import { Size } from '../types';
+declare type PasswordFieldProps = {
+    id: string;
+    disabled?: boolean;
+    onChange?: (text: string) => void;
+    invalid?: boolean;
+    value?: string;
+    validationMessage?: string;
+    autoComplete?: string;
+    placeholder?: string;
+    required?: boolean;
+    readOnly?: boolean;
+    size?: Size.Small | Size.Medium;
+    margin?: string;
+};
+declare const PasswordField: ({ id, disabled, onChange, invalid, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => JSX.Element;
+export default PasswordField;

package/dist/InputFields/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/PasswordField.tsx"],"names":["React","styled","COLORS","InputFieldStyling","InputWrapper","ErrorMessage","Z_INDEXES","useFocusVisibleRef","IconButton","SystemIcons","TechnicalWarning","StyledPassSwitch","div","badge","PasswordRow","PasswordField","id","disabled","onChange","invalid","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","useState","passwordHidden","setPasswordHidden","inputRef","handleKeyDown","e","keyCode","display","concat","target","critical_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS } from '../styles';\r\nimport { Size } from '../types';\r\nimport { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';\r\nimport { Z_INDEXES } from '../styles';\r\nimport { useFocusVisibleRef } from '../common';\r\nimport { IconButton } from '../Button';\r\nimport { SystemIcons } from '../icons';\r\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\r\n\r\ntype PasswordFieldProps = {\r\n  id: string;\r\n  disabled?: boolean;\r\n  onChange?: (text: string) => void;\r\n  invalid?: boolean;\r\n  value?: string;\r\n  validationMessage?: string;\r\n  autoComplete?: string;\r\n  placeholder?: string;\r\n  required?: boolean;\r\n  readOnly?: boolean;\r\n  size?: Size.Small | Size.Medium;\r\n  margin?: string;\r\n};\r\n\r\nconst StyledPassSwitch = styled.div`\r\n  z-index: ${Z_INDEXES.badge};\r\n  right: 0;\r\n  position: absolute;\r\n`;\r\n\r\nconst PasswordRow = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nconst PasswordField = ({ id, disabled, onChange, invalid, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => {\r\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\r\n  const inputRef = useFocusVisibleRef();\r\n\r\n  const handleKeyDown = (e: any) => {\r\n    if (e.keyCode === 13) {\r\n      setPasswordHidden(!passwordHidden);\r\n    }\r\n  };\r\n  return (\r\n    <>\r\n      <InputWrapper disabled={disabled} readOnly={readOnly} margin={margin}>\r\n        <div style={{ display: 'block', margin: '4px 0px'}}>\r\n          <PasswordRow>\r\n            <InputFieldStyling\r\n              id={id}\r\n              ref={inputRef}\r\n              type={passwordHidden ? 'password' : 'text'}\r\n              name=\"password\"\r\n              value={value}\r\n              className={(invalid ? 'invalid ' : '').concat(size ? size : '')}\r\n              tabIndex={disabled || readOnly ? -1 : 0}\r\n              autoComplete={autoComplete}\r\n              activeErrorMessage={!!validationMessage}\r\n              placeholder={placeholder}\r\n              disabled={disabled}\r\n              required={required}\r\n              readOnly={readOnly}\r\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n            />\r\n            <StyledPassSwitch className={size ? size : ''}>\r\n              {!disabled && !readOnly ? (\r\n                passwordHidden ? (\r\n                  <IconButton\r\n                    id={`${id}_Visible`}\r\n                    iconColor={'#666666'}\r\n                    variant={'secondary'}\r\n                    shape={'circular'}\r\n                    onKeyPress={handleKeyDown}\r\n                    action={() => setPasswordHidden(!passwordHidden)}>\r\n                    <SystemIcons.VisibleOff />\r\n                  </IconButton>\r\n                ) : (\r\n                  <IconButton\r\n                    id={`${id}_NotVisible`}\r\n                    iconColor={'#666666'}\r\n                    variant={'secondary'}\r\n                    shape={'circular'}\r\n                    onKeyPress={handleKeyDown}\r\n                    action={() => setPasswordHidden(!passwordHidden)}>\r\n                    <SystemIcons.VisibleOn />\r\n                  </IconButton>\r\n                )\r\n              ) : null}\r\n            </StyledPassSwitch>\r\n          </PasswordRow>\r\n        </div>\r\n      </InputWrapper>\r\n      {validationMessage && (\r\n        <ErrorMessage className={size || ''}>\r\n          <TechnicalWarning 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 PasswordField;\r\n"],"file":"PasswordField.js"}
+{"version":3,"sources":["../../src/InputFields/PasswordField.tsx"],"names":["React","styled","COLORS","InputFieldStyling","InputWrapper","ErrorMessage","Z_INDEXES","useFocusVisibleRef","IconButton","SystemIcons","TechnicalWarning","StyledPassSwitch","div","badge","PasswordRow","PasswordField","id","disabled","onChange","invalid","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","useState","passwordHidden","setPasswordHidden","inputRef","handleKeyDown","e","keyCode","display","concat","target","critical_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Size } from '../types';\nimport { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';\nimport { Z_INDEXES } from '../styles';\nimport { useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\ntype PasswordFieldProps = {\n  id: string;\n  disabled?: boolean;\n  onChange?: (text: string) => void;\n  invalid?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  z-index: ${Z_INDEXES.badge};\n  right: 0;\n  position: absolute;\n`;\n\nconst PasswordRow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst PasswordField = ({ id, disabled, onChange, invalid, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = useFocusVisibleRef();\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n  return (\n    <>\n      <InputWrapper disabled={disabled} readOnly={readOnly} margin={margin}>\n        <div style={{ display: 'block', margin: '4px 0px'}}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name=\"password\"\n              value={value}\n              className={(invalid ? 'invalid ' : '').concat(size ? size : '')}\n              tabIndex={disabled || readOnly ? -1 : 0}\n              autoComplete={autoComplete}\n              activeErrorMessage={!!validationMessage}\n              placeholder={placeholder}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !readOnly ? (\n                passwordHidden ? (\n                  <IconButton\n                    id={`${id}_Visible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOff />\n                  </IconButton>\n                ) : (\n                  <IconButton\n                    id={`${id}_NotVisible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOn />\n                  </IconButton>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}

package/dist/InputFields/QuickSearch.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/QuickSearch.tsx"],"names":["Wrapper","styled","div","StyledSearchField","COLORS","white","neutral_400","primary_800","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","searchFieldRef","React","useRef","searchFieldInputRef","useState","visible","searchFieldVisible","setSearchFieldVisible","handleClickOutside","e","current","contains","target","length","handleKeyDown","key","handleBlur","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","focusVisible","term","neutral_300","neutral_600","Size","Small"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport IconButton from '../Button/Iconbutton';\r\nimport { SearchIconWrapper, StyledIcon } from './styling';\r\nimport { Size } from '../types';\r\nimport { COLORS, LoadingIndicator } from '..';\r\nimport { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField, { StyledSearchField } from './components/SearchField';\r\n\r\nconst Wrapper = styled.div`\r\n  width: 100%;\r\n\r\n  ${StyledSearchField} {\r\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\r\n\r\n    background-color: transparent;\r\n\r\n    &.small {\r\n      width: 48px;\r\n    }\r\n\r\n    &.medium {\r\n      width: 56px;\r\n    }\r\n\r\n    &.expanded {\r\n      width: 100%;\r\n    }\r\n\r\n    box-shadow: none;\r\n\r\n    &:hover {\r\n      box-shadow: none;\r\n    }\r\n\r\n    &.expanded {\r\n      background-color: ${COLORS.white};\r\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\r\n    }\r\n\r\n    &.expanded:hover,\r\n    &.expanded:focus-within {\r\n      box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\r\n    }\r\n  }\r\n`;\r\n\r\ntype QuickSearchProps = {\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  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  size?: Size.Small | Size.Medium;\r\n  margin?: string;\r\n  loading?: boolean;\r\n};\r\n\r\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\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  onKeyDown,\r\n  size,\r\n  margin,\r\n  loading,\r\n}: QuickSearchProps) => {\r\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\r\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\r\n\r\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<{ visible: boolean; focus?: boolean }>({\r\n    visible: false,\r\n  });\r\n\r\n  const handleClickOutside = (e: any) => {\r\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\r\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\r\n        setSearchFieldVisible({ visible: false });\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleKeyDown = (e: any) => {\r\n    if (onKeyDown) {\r\n      onKeyDown(e);\r\n    }\r\n    if (e.key === 'Escape') {\r\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\r\n        setSearchFieldVisible({ visible: false });\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleBlur = (e: any) => {\r\n    if (!searchTerm && (!e.relatedTarget || !searchFieldRef.current?.contains(e.relatedTarget))) {\r\n      setSearchFieldVisible({ visible: false });\r\n    }\r\n  };\r\n\r\n  const handleSearchIconAction = (e: any) => {\r\n    if (!searchFieldVisible?.visible) {\r\n      setSearchFieldVisible({\r\n        visible: !searchFieldVisible.visible,\r\n        focus: !searchFieldVisible.visible && e?.detail !== 1,\r\n      });\r\n    }\r\n  };\r\n\r\n  // set search field visibility on search term change\r\n  React.useEffect(() => {\r\n    if (!!searchTerm?.length && !searchFieldVisible?.visible) {\r\n      setSearchFieldVisible({ visible: true, focus: false });\r\n    }\r\n  }, [searchTerm, searchFieldVisible]);\r\n\r\n  // register click outside handler\r\n  React.useEffect(() => {\r\n    document.addEventListener('click', handleClickOutside);\r\n    return () => {\r\n      document.removeEventListener('click', handleClickOutside);\r\n    };\r\n  });\r\n\r\n  // focus search input on visibility change\r\n  React.useEffect(() => {\r\n    if (searchFieldVisible?.visible) {\r\n      searchFieldInputRef?.current?.focus({ focusVisible: searchFieldVisible.focus } as any);\r\n    }\r\n  }, [searchFieldVisible.visible, searchFieldInputRef]);\r\n\r\n  return (\r\n    <Wrapper>\r\n      <SearchField\r\n        ref={searchFieldRef}\r\n        id={id}\r\n        size={size}\r\n        searchTerm={searchTerm}\r\n        style={{\r\n          margin: margin,\r\n        }}\r\n        onBlur={handleBlur}\r\n        className={searchFieldVisible?.visible ? 'expanded' : ''}>\r\n        {searchFieldVisible?.visible && (\r\n          <SearchBarInput\r\n            placeholder={disabled ? '' : placeholder}\r\n            id={id}\r\n            ref={searchFieldInputRef}\r\n            disabled={disabled}\r\n            onKeyDown={handleKeyDown}\r\n            size={size}\r\n            setSearchTerm={(term: string) => setSearchTerm(term)}\r\n            searchTerm={searchTerm}\r\n            enterSearch={enterSearch}\r\n            focusParentRefs={[searchFieldRef]}\r\n          />\r\n        )}\r\n        <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel}>\r\n          <IconButton\r\n            shouldNotInteract={searchFieldVisible?.visible}\r\n            id={`${id}_Searchbutton`}\r\n            variant=\"secondary\"\r\n            shape=\"circular\"\r\n            tabIndex={searchFieldVisible?.visible ? -1 : 0}\r\n            action={handleSearchIconAction}>\r\n            <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\r\n          </IconButton>\r\n        </SearchIconWrapper>\r\n        <StyledIcon className={size ? size : ''} role=\"button\" hidden={!searchTerm || !searchFieldVisible?.visible}>\r\n          <IconButton\r\n            id={`${id}_Clearicon`}\r\n            variant=\"secondary\"\r\n            shape=\"circular\"\r\n            action={(e) => {\r\n              removeSearch(e);\r\n              searchFieldInputRef?.current?.focus();\r\n            }}>\r\n            <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\r\n          </IconButton>\r\n        </StyledIcon>\r\n        {loading && searchFieldVisible?.visible && (\r\n          <StyledIcon className={size ? size : ''}>\r\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\r\n          </StyledIcon>\r\n        )}\r\n      </SearchField>\r\n    </Wrapper>\r\n  );\r\n};\r\n\r\nexport default QuickSearch;\r\n"],"file":"QuickSearch.cjs"}
+{"version":3,"sources":["../../src/InputFields/QuickSearch.tsx"],"names":["Wrapper","styled","div","StyledSearchField","COLORS","white","neutral_400","primary_800","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","searchFieldRef","React","useRef","searchFieldInputRef","useState","visible","searchFieldVisible","setSearchFieldVisible","handleClickOutside","e","current","contains","target","length","handleKeyDown","key","handleBlur","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","focusVisible","term","neutral_300","neutral_600","Size","Small"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport IconButton from '../Button/Iconbutton';\nimport { SearchIconWrapper, StyledIcon } from './styling';\nimport { Size } from '../types';\nimport { COLORS, LoadingIndicator } from '..';\nimport { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField, { StyledSearchField } from './components/SearchField';\n\nconst Wrapper = styled.div`\n  width: 100%;\n\n  ${StyledSearchField} {\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n    background-color: transparent;\n\n    &.small {\n      width: 48px;\n    }\n\n    &.medium {\n      width: 56px;\n    }\n\n    &.expanded {\n      width: 100%;\n    }\n\n    box-shadow: none;\n\n    &:hover {\n      box-shadow: none;\n    }\n\n    &.expanded {\n      background-color: ${COLORS.white};\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n    }\n\n    &.expanded:hover,\n    &.expanded:focus-within {\n      box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n    }\n  }\n`;\n\ntype QuickSearchProps = {\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  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  loading?: boolean;\n};\n\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  onKeyDown,\n  size,\n  margin,\n  loading,\n}: QuickSearchProps) => {\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\n\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<{ visible: boolean; focus?: boolean }>({\n    visible: false,\n  });\n\n  const handleClickOutside = (e: any) => {\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\n        setSearchFieldVisible({ visible: false });\n      }\n    }\n  };\n\n  const handleKeyDown = (e: any) => {\n    if (onKeyDown) {\n      onKeyDown(e);\n    }\n    if (e.key === 'Escape') {\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\n        setSearchFieldVisible({ visible: false });\n      }\n    }\n  };\n\n  const handleBlur = (e: any) => {\n    if (!searchTerm && (!e.relatedTarget || !searchFieldRef.current?.contains(e.relatedTarget))) {\n      setSearchFieldVisible({ visible: false });\n    }\n  };\n\n  const handleSearchIconAction = (e: any) => {\n    if (!searchFieldVisible?.visible) {\n      setSearchFieldVisible({\n        visible: !searchFieldVisible.visible,\n        focus: !searchFieldVisible.visible && e?.detail !== 1,\n      });\n    }\n  };\n\n  // set search field visibility on search term change\n  React.useEffect(() => {\n    if (!!searchTerm?.length && !searchFieldVisible?.visible) {\n      setSearchFieldVisible({ visible: true, focus: false });\n    }\n  }, [searchTerm, searchFieldVisible]);\n\n  // register click outside handler\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  // focus search input on visibility change\n  React.useEffect(() => {\n    if (searchFieldVisible?.visible) {\n      searchFieldInputRef?.current?.focus({ focusVisible: searchFieldVisible.focus } as any);\n    }\n  }, [searchFieldVisible.visible, searchFieldInputRef]);\n\n  return (\n    <Wrapper>\n      <SearchField\n        ref={searchFieldRef}\n        id={id}\n        size={size}\n        searchTerm={searchTerm}\n        style={{\n          margin: margin,\n        }}\n        onBlur={handleBlur}\n        className={searchFieldVisible?.visible ? 'expanded' : ''}>\n        {searchFieldVisible?.visible && (\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            ref={searchFieldInputRef}\n            disabled={disabled}\n            onKeyDown={handleKeyDown}\n            size={size}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            enterSearch={enterSearch}\n            focusParentRefs={[searchFieldRef]}\n          />\n        )}\n        <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel}>\n          <IconButton\n            shouldNotInteract={searchFieldVisible?.visible}\n            id={`${id}_Searchbutton`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            tabIndex={searchFieldVisible?.visible ? -1 : 0}\n            action={handleSearchIconAction}>\n            <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n          </IconButton>\n        </SearchIconWrapper>\n        <StyledIcon className={size ? size : ''} role=\"button\" hidden={!searchTerm || !searchFieldVisible?.visible}>\n          <IconButton\n            id={`${id}_Clearicon`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            action={(e) => {\n              removeSearch(e);\n              searchFieldInputRef?.current?.focus();\n            }}>\n            <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n          </IconButton>\n        </StyledIcon>\n        {loading && searchFieldVisible?.visible && (\n          <StyledIcon className={size ? size : ''}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </StyledIcon>\n        )}\n      </SearchField>\n    </Wrapper>\n  );\n};\n\nexport default QuickSearch;\n"],"file":"QuickSearch.cjs"}

package/dist/InputFields/QuickSearch.d.ts

@@ -1,18 +1,18 @@
-import * as React from 'react';
-import { Size } from '../types';
-declare type QuickSearchProps = {
-    id: string;
-    searchTerm?: string;
-    setSearchTerm: (term: string) => void;
-    enterSearch: (e: any) => void;
-    removeSearch: (e: any) => void;
-    placeholder?: string;
-    performSearchLabel?: string;
-    disabled?: boolean;
-    onKeyDown?: (e: React.KeyboardEvent) => void;
-    size?: Size.Small | Size.Medium;
-    margin?: string;
-    loading?: boolean;
-};
-declare const QuickSearch: React.FunctionComponent<QuickSearchProps>;
-export default QuickSearch;
+import * as React from 'react';
+import { Size } from '../types';
+declare type QuickSearchProps = {
+    id: string;
+    searchTerm?: string;
+    setSearchTerm: (term: string) => void;
+    enterSearch: (e: any) => void;
+    removeSearch: (e: any) => void;
+    placeholder?: string;
+    performSearchLabel?: string;
+    disabled?: boolean;
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+    size?: Size.Small | Size.Medium;
+    margin?: string;
+    loading?: boolean;
+};
+declare const QuickSearch: React.FunctionComponent<QuickSearchProps>;
+export default QuickSearch;

package/dist/InputFields/QuickSearch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/QuickSearch.tsx"],"names":["React","styled","IconButton","SearchIconWrapper","StyledIcon","Size","COLORS","LoadingIndicator","Search","SearchIcon","Clear","ClearIcon","SearchBarInput","SearchField","StyledSearchField","Wrapper","div","white","neutral_400","primary_800","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","searchFieldRef","useRef","searchFieldInputRef","useState","visible","searchFieldVisible","setSearchFieldVisible","handleClickOutside","e","current","contains","target","length","handleKeyDown","key","handleBlur","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","focusVisible","term","neutral_300","neutral_600","Small"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport IconButton from '../Button/Iconbutton';\r\nimport { SearchIconWrapper, StyledIcon } from './styling';\r\nimport { Size } from '../types';\r\nimport { COLORS, LoadingIndicator } from '..';\r\nimport { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField, { StyledSearchField } from './components/SearchField';\r\n\r\nconst Wrapper = styled.div`\r\n  width: 100%;\r\n\r\n  ${StyledSearchField} {\r\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\r\n\r\n    background-color: transparent;\r\n\r\n    &.small {\r\n      width: 48px;\r\n    }\r\n\r\n    &.medium {\r\n      width: 56px;\r\n    }\r\n\r\n    &.expanded {\r\n      width: 100%;\r\n    }\r\n\r\n    box-shadow: none;\r\n\r\n    &:hover {\r\n      box-shadow: none;\r\n    }\r\n\r\n    &.expanded {\r\n      background-color: ${COLORS.white};\r\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\r\n    }\r\n\r\n    &.expanded:hover,\r\n    &.expanded:focus-within {\r\n      box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\r\n    }\r\n  }\r\n`;\r\n\r\ntype QuickSearchProps = {\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  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  size?: Size.Small | Size.Medium;\r\n  margin?: string;\r\n  loading?: boolean;\r\n};\r\n\r\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\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  onKeyDown,\r\n  size,\r\n  margin,\r\n  loading,\r\n}: QuickSearchProps) => {\r\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\r\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\r\n\r\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<{ visible: boolean; focus?: boolean }>({\r\n    visible: false,\r\n  });\r\n\r\n  const handleClickOutside = (e: any) => {\r\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\r\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\r\n        setSearchFieldVisible({ visible: false });\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleKeyDown = (e: any) => {\r\n    if (onKeyDown) {\r\n      onKeyDown(e);\r\n    }\r\n    if (e.key === 'Escape') {\r\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\r\n        setSearchFieldVisible({ visible: false });\r\n      }\r\n    }\r\n  };\r\n\r\n  const handleBlur = (e: any) => {\r\n    if (!searchTerm && (!e.relatedTarget || !searchFieldRef.current?.contains(e.relatedTarget))) {\r\n      setSearchFieldVisible({ visible: false });\r\n    }\r\n  };\r\n\r\n  const handleSearchIconAction = (e: any) => {\r\n    if (!searchFieldVisible?.visible) {\r\n      setSearchFieldVisible({\r\n        visible: !searchFieldVisible.visible,\r\n        focus: !searchFieldVisible.visible && e?.detail !== 1,\r\n      });\r\n    }\r\n  };\r\n\r\n  // set search field visibility on search term change\r\n  React.useEffect(() => {\r\n    if (!!searchTerm?.length && !searchFieldVisible?.visible) {\r\n      setSearchFieldVisible({ visible: true, focus: false });\r\n    }\r\n  }, [searchTerm, searchFieldVisible]);\r\n\r\n  // register click outside handler\r\n  React.useEffect(() => {\r\n    document.addEventListener('click', handleClickOutside);\r\n    return () => {\r\n      document.removeEventListener('click', handleClickOutside);\r\n    };\r\n  });\r\n\r\n  // focus search input on visibility change\r\n  React.useEffect(() => {\r\n    if (searchFieldVisible?.visible) {\r\n      searchFieldInputRef?.current?.focus({ focusVisible: searchFieldVisible.focus } as any);\r\n    }\r\n  }, [searchFieldVisible.visible, searchFieldInputRef]);\r\n\r\n  return (\r\n    <Wrapper>\r\n      <SearchField\r\n        ref={searchFieldRef}\r\n        id={id}\r\n        size={size}\r\n        searchTerm={searchTerm}\r\n        style={{\r\n          margin: margin,\r\n        }}\r\n        onBlur={handleBlur}\r\n        className={searchFieldVisible?.visible ? 'expanded' : ''}>\r\n        {searchFieldVisible?.visible && (\r\n          <SearchBarInput\r\n            placeholder={disabled ? '' : placeholder}\r\n            id={id}\r\n            ref={searchFieldInputRef}\r\n            disabled={disabled}\r\n            onKeyDown={handleKeyDown}\r\n            size={size}\r\n            setSearchTerm={(term: string) => setSearchTerm(term)}\r\n            searchTerm={searchTerm}\r\n            enterSearch={enterSearch}\r\n            focusParentRefs={[searchFieldRef]}\r\n          />\r\n        )}\r\n        <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel}>\r\n          <IconButton\r\n            shouldNotInteract={searchFieldVisible?.visible}\r\n            id={`${id}_Searchbutton`}\r\n            variant=\"secondary\"\r\n            shape=\"circular\"\r\n            tabIndex={searchFieldVisible?.visible ? -1 : 0}\r\n            action={handleSearchIconAction}>\r\n            <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\r\n          </IconButton>\r\n        </SearchIconWrapper>\r\n        <StyledIcon className={size ? size : ''} role=\"button\" hidden={!searchTerm || !searchFieldVisible?.visible}>\r\n          <IconButton\r\n            id={`${id}_Clearicon`}\r\n            variant=\"secondary\"\r\n            shape=\"circular\"\r\n            action={(e) => {\r\n              removeSearch(e);\r\n              searchFieldInputRef?.current?.focus();\r\n            }}>\r\n            <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\r\n          </IconButton>\r\n        </StyledIcon>\r\n        {loading && searchFieldVisible?.visible && (\r\n          <StyledIcon className={size ? size : ''}>\r\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\r\n          </StyledIcon>\r\n        )}\r\n      </SearchField>\r\n    </Wrapper>\r\n  );\r\n};\r\n\r\nexport default QuickSearch;\r\n"],"file":"QuickSearch.js"}
+{"version":3,"sources":["../../src/InputFields/QuickSearch.tsx"],"names":["React","styled","IconButton","SearchIconWrapper","StyledIcon","Size","COLORS","LoadingIndicator","Search","SearchIcon","Clear","ClearIcon","SearchBarInput","SearchField","StyledSearchField","Wrapper","div","white","neutral_400","primary_800","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","searchFieldRef","useRef","searchFieldInputRef","useState","visible","searchFieldVisible","setSearchFieldVisible","handleClickOutside","e","current","contains","target","length","handleKeyDown","key","handleBlur","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","focusVisible","term","neutral_300","neutral_600","Small"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport IconButton from '../Button/Iconbutton';\nimport { SearchIconWrapper, StyledIcon } from './styling';\nimport { Size } from '../types';\nimport { COLORS, LoadingIndicator } from '..';\nimport { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField, { StyledSearchField } from './components/SearchField';\n\nconst Wrapper = styled.div`\n  width: 100%;\n\n  ${StyledSearchField} {\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n    background-color: transparent;\n\n    &.small {\n      width: 48px;\n    }\n\n    &.medium {\n      width: 56px;\n    }\n\n    &.expanded {\n      width: 100%;\n    }\n\n    box-shadow: none;\n\n    &:hover {\n      box-shadow: none;\n    }\n\n    &.expanded {\n      background-color: ${COLORS.white};\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n    }\n\n    &.expanded:hover,\n    &.expanded:focus-within {\n      box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n    }\n  }\n`;\n\ntype QuickSearchProps = {\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  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  loading?: boolean;\n};\n\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  onKeyDown,\n  size,\n  margin,\n  loading,\n}: QuickSearchProps) => {\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\n\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<{ visible: boolean; focus?: boolean }>({\n    visible: false,\n  });\n\n  const handleClickOutside = (e: any) => {\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\n        setSearchFieldVisible({ visible: false });\n      }\n    }\n  };\n\n  const handleKeyDown = (e: any) => {\n    if (onKeyDown) {\n      onKeyDown(e);\n    }\n    if (e.key === 'Escape') {\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\n        setSearchFieldVisible({ visible: false });\n      }\n    }\n  };\n\n  const handleBlur = (e: any) => {\n    if (!searchTerm && (!e.relatedTarget || !searchFieldRef.current?.contains(e.relatedTarget))) {\n      setSearchFieldVisible({ visible: false });\n    }\n  };\n\n  const handleSearchIconAction = (e: any) => {\n    if (!searchFieldVisible?.visible) {\n      setSearchFieldVisible({\n        visible: !searchFieldVisible.visible,\n        focus: !searchFieldVisible.visible && e?.detail !== 1,\n      });\n    }\n  };\n\n  // set search field visibility on search term change\n  React.useEffect(() => {\n    if (!!searchTerm?.length && !searchFieldVisible?.visible) {\n      setSearchFieldVisible({ visible: true, focus: false });\n    }\n  }, [searchTerm, searchFieldVisible]);\n\n  // register click outside handler\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  // focus search input on visibility change\n  React.useEffect(() => {\n    if (searchFieldVisible?.visible) {\n      searchFieldInputRef?.current?.focus({ focusVisible: searchFieldVisible.focus } as any);\n    }\n  }, [searchFieldVisible.visible, searchFieldInputRef]);\n\n  return (\n    <Wrapper>\n      <SearchField\n        ref={searchFieldRef}\n        id={id}\n        size={size}\n        searchTerm={searchTerm}\n        style={{\n          margin: margin,\n        }}\n        onBlur={handleBlur}\n        className={searchFieldVisible?.visible ? 'expanded' : ''}>\n        {searchFieldVisible?.visible && (\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            ref={searchFieldInputRef}\n            disabled={disabled}\n            onKeyDown={handleKeyDown}\n            size={size}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            enterSearch={enterSearch}\n            focusParentRefs={[searchFieldRef]}\n          />\n        )}\n        <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel}>\n          <IconButton\n            shouldNotInteract={searchFieldVisible?.visible}\n            id={`${id}_Searchbutton`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            tabIndex={searchFieldVisible?.visible ? -1 : 0}\n            action={handleSearchIconAction}>\n            <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n          </IconButton>\n        </SearchIconWrapper>\n        <StyledIcon className={size ? size : ''} role=\"button\" hidden={!searchTerm || !searchFieldVisible?.visible}>\n          <IconButton\n            id={`${id}_Clearicon`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            action={(e) => {\n              removeSearch(e);\n              searchFieldInputRef?.current?.focus();\n            }}>\n            <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n          </IconButton>\n        </StyledIcon>\n        {loading && searchFieldVisible?.visible && (\n          <StyledIcon className={size ? size : ''}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </StyledIcon>\n        )}\n      </SearchField>\n    </Wrapper>\n  );\n};\n\nexport default QuickSearch;\n"],"file":"QuickSearch.js"}

package/dist/InputFields/RadioButton.cjs.map

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

package/dist/InputFields/RadioButton.d.ts

@@ -1,18 +1,18 @@
-import * as React from 'react';
-import { Size } from '../types';
-interface Props {
-    id?: string;
-    selected: boolean;
-    select: (selected: boolean) => void;
-    label?: string;
-    additionalLabel?: string;
-    invalid?: boolean;
-    disabled?: boolean;
-    iconPointerEventsTransparent?: boolean;
-    margin?: string;
-    size?: Size;
-    tabIndexVal?: number;
-    className?: string;
-}
-declare const RadioButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
-export default RadioButton;
+import * as React from 'react';
+import { Size } from '../types';
+interface Props {
+    id?: string;
+    selected: boolean;
+    select: (selected: boolean) => void;
+    label?: string;
+    additionalLabel?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    iconPointerEventsTransparent?: boolean;
+    margin?: string;
+    size?: Size;
+    tabIndexVal?: number;
+    className?: string;
+}
+declare const RadioButton: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default RadioButton;

package/dist/InputFields/RadioButton.js.map

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

package/dist/InputFields/ResponsiveComponentWrapper.cjs

@@ -25,12 +25,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/**
- * Import React libraries.
+/**
+ * Import React libraries.
  */
 
-/**
- * Import custom styles.
+/**
+ * Import custom styles.
  */
 var ReponsiveComponentWrapper = function ReponsiveComponentWrapper(_ref) {
   var children = _ref.children,

package/dist/InputFields/ResponsiveComponentWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"names":["ReponsiveComponentWrapper","children","size","React","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","BREAKPOINTS","MEDIUM","replace","matches","addEventListener","cleanup","removeEventListener","Size","Medium","Small"],"mappings":";;;;;;;;;;;;;;;AAGA;;AACA;;AAKA;;;;;;;;AATA;AACA;AACA;;AAIA;AACA;AACA;AASA,IAAMA,yBAA8D,GAAG,SAAjEA,yBAAiE,OAAoC;AAAA,MAAjCC,QAAiC,QAAjCA,QAAiC;AAAA,MAAvBC,IAAuB,QAAvBA,IAAuB;;AACzG;AACA,wBAAwCC,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;;AAEAH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AACpB,QAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,UAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,WAAqBC,oBAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,SAA3B,EAAsC,EAAtC,CAArB,EAAZ;AACAR,MAAAA,eAAe,CAACG,GAAG,CAACM,OAAL,CAAf;AACD,KAHD;;AAIAL,IAAAA,MAAM,CAACM,gBAAP,CAAwB,QAAxB,EAAkCR,YAAlC;AACA,WAAO,SAASS,OAAT,GAAmB;AACxBP,MAAAA,MAAM,CAACQ,mBAAP,CAA2B,QAA3B,EAAqCV,YAArC;AACD,KAFD;AAGD,GATD;AAWA,SAAON,IAAI,IAAIA,IAAI,KAAKiB,YAAKC,MAAtB,gBACL,qBAAC,mBAAD;AAAA,cAAcnB;AAAd,IADK,GAEHC,IAAI,IAAIA,IAAI,KAAKiB,YAAKE,KAAtB,gBACF,qBAAC,oBAAD;AAAA,cAAepB;AAAf,IADE,GAEAI,YAAY,gBACd,qBAAC,mBAAD;AAAA,cAAcJ;AAAd,IADc,gBAGd,qBAAC,oBAAD;AAAA,cAAeA;AAAf,IAPF;AASD,CAxBD;;;AAHEA,EAAAA,Q;;eA6BaD,yB","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.cjs"}
+{"version":3,"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"names":["ReponsiveComponentWrapper","children","size","React","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","BREAKPOINTS","MEDIUM","replace","matches","addEventListener","cleanup","removeEventListener","Size","Medium","Small"],"mappings":";;;;;;;;;;;;;;;AAGA;;AACA;;AAKA;;;;;;;;AATA;AACA;AACA;;AAIA;AACA;AACA;AASA,IAAMA,yBAA8D,GAAG,SAAjEA,yBAAiE,OAAoC;AAAA,MAAjCC,QAAiC,QAAjCA,QAAiC;AAAA,MAAvBC,IAAuB,QAAvBA,IAAuB;;AACzG;AACA,wBAAwCC,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;;AAEAH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AACpB,QAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,UAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,WAAqBC,oBAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,SAA3B,EAAsC,EAAtC,CAArB,EAAZ;AACAR,MAAAA,eAAe,CAACG,GAAG,CAACM,OAAL,CAAf;AACD,KAHD;;AAIAL,IAAAA,MAAM,CAACM,gBAAP,CAAwB,QAAxB,EAAkCR,YAAlC;AACA,WAAO,SAASS,OAAT,GAAmB;AACxBP,MAAAA,MAAM,CAACQ,mBAAP,CAA2B,QAA3B,EAAqCV,YAArC;AACD,KAFD;AAGD,GATD;AAWA,SAAON,IAAI,IAAIA,IAAI,KAAKiB,YAAKC,MAAtB,gBACL,qBAAC,mBAAD;AAAA,cAAcnB;AAAd,IADK,GAEHC,IAAI,IAAIA,IAAI,KAAKiB,YAAKE,KAAtB,gBACF,qBAAC,oBAAD;AAAA,cAAepB;AAAf,IADE,GAEAI,YAAY,gBACd,qBAAC,mBAAD;AAAA,cAAcJ;AAAd,IADc,gBAGd,qBAAC,oBAAD;AAAA,cAAeA;AAAf,IAPF;AASD,CAxBD;;;AAHEA,EAAAA,Q;;eA6BaD,yB","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\n\n// Add component-specific types\ntype LabelProps = {\n  size?: Size.Small | Size.Medium;\n  children?: any;\n};\n\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\n  // Globally used variables within the component\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\n      setIsMediumView(mql.matches);\n    };\n    window.addEventListener('resize', handleResize);\n    return function cleanup() {\n      window.removeEventListener('resize', handleResize);\n    };\n  });\n\n  return size && size === Size.Medium ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : size && size === Size.Small ? (\n    <ComponentXXS>{children}</ComponentXXS>\n  ) : isMediumView ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : (\n    <ComponentXXS>{children}</ComponentXXS>\n  );\n};\n\nexport default ReponsiveComponentWrapper;\n"],"file":"ResponsiveComponentWrapper.cjs"}

package/dist/InputFields/ResponsiveComponentWrapper.d.ts

@@ -1,11 +1,11 @@
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-import { Size } from '../types';
-declare type LabelProps = {
-    size?: Size.Small | Size.Medium;
-    children?: any;
-};
-declare const ReponsiveComponentWrapper: React.FunctionComponent<LabelProps>;
-export default ReponsiveComponentWrapper;
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+import { Size } from '../types';
+declare type LabelProps = {
+    size?: Size.Small | Size.Medium;
+    children?: any;
+};
+declare const ReponsiveComponentWrapper: React.FunctionComponent<LabelProps>;
+export default ReponsiveComponentWrapper;

package/dist/InputFields/ResponsiveComponentWrapper.js

@@ -1,13 +1,13 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _pt from "prop-types";
 
-/**
- * Import React libraries.
+/**
+ * Import React libraries.
  */
 import * as React from 'react';
 import { Size } from '../types';
-/**
- * Import custom styles.
+/**
+ * Import custom styles.
  */
 
 import { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles'; // Add component-specific types

package/dist/InputFields/ResponsiveComponentWrapper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"names":["React","Size","BREAKPOINTS","ComponentXXS","ComponentXS","ReponsiveComponentWrapper","children","size","useState","isMediumView","setIsMediumView","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,IAAMC,yBAA8D,GAAG,SAAjEA,yBAAiE,OAAoC;AAAA,MAAjCC,QAAiC,QAAjCA,QAAiC;AAAA,MAAvBC,IAAuB,QAAvBA,IAAuB;;AACzG;AACA,wBAAwCP,KAAK,CAACQ,QAAN,CAAwB,KAAxB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;;AAEAV,EAAAA,KAAK,CAACW,SAAN,CAAgB,YAAM;AACpB,QAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,UAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,WAAqBb,WAAW,CAACc,MAAZ,CAAmBC,OAAnB,CAA2B,SAA3B,EAAsC,EAAtC,CAArB,EAAZ;AACAP,MAAAA,eAAe,CAACG,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,KAAC,WAAD;AAAA,cAAchB;AAAd,IADK,GAEHC,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACsB,KAAtB,gBACF,KAAC,YAAD;AAAA,cAAejB;AAAf,IADE,GAEAG,YAAY,gBACd,KAAC,WAAD;AAAA,cAAcH;AAAd,IADc,gBAGd,KAAC,YAAD;AAAA,cAAeA;AAAf,IAPF;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"}
+{"version":3,"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"names":["React","Size","BREAKPOINTS","ComponentXXS","ComponentXS","ReponsiveComponentWrapper","children","size","useState","isMediumView","setIsMediumView","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,IAAMC,yBAA8D,GAAG,SAAjEA,yBAAiE,OAAoC;AAAA,MAAjCC,QAAiC,QAAjCA,QAAiC;AAAA,MAAvBC,IAAuB,QAAvBA,IAAuB;;AACzG;AACA,wBAAwCP,KAAK,CAACQ,QAAN,CAAwB,KAAxB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;;AAEAV,EAAAA,KAAK,CAACW,SAAN,CAAgB,YAAM;AACpB,QAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,UAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,WAAqBb,WAAW,CAACc,MAAZ,CAAmBC,OAAnB,CAA2B,SAA3B,EAAsC,EAAtC,CAArB,EAAZ;AACAP,MAAAA,eAAe,CAACG,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,KAAC,WAAD;AAAA,cAAchB;AAAd,IADK,GAEHC,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACsB,KAAtB,gBACF,KAAC,YAAD;AAAA,cAAejB;AAAf,IADE,GAEAG,YAAY,gBACd,KAAC,WAAD;AAAA,cAAcH;AAAd,IADc,gBAGd,KAAC,YAAD;AAAA,cAAeA;AAAf,IAPF;AASD,CAxBD;;;AAHEA,EAAAA,Q;;AA6BF,eAAeD,yBAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\n\n// Add component-specific types\ntype LabelProps = {\n  size?: Size.Small | Size.Medium;\n  children?: any;\n};\n\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\n  // Globally used variables within the component\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\n      setIsMediumView(mql.matches);\n    };\n    window.addEventListener('resize', handleResize);\n    return function cleanup() {\n      window.removeEventListener('resize', handleResize);\n    };\n  });\n\n  return size && size === Size.Medium ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : size && size === Size.Small ? (\n    <ComponentXXS>{children}</ComponentXXS>\n  ) : isMediumView ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : (\n    <ComponentXXS>{children}</ComponentXXS>\n  );\n};\n\nexport default ReponsiveComponentWrapper;\n"],"file":"ResponsiveComponentWrapper.js"}

package/dist/InputFields/SearchBar.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/SearchBar.tsx"],"names":["ClearIconWrapper","styled","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","containerRef","React","useRef","isPressingEnter","e","key","preventDefault","stopPropagation","term","concat","COLORS","critical_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 {ErrorMessage, InputWrapper, SearchIconWrapper} 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 containerRef = React.useRef<any>(null);\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'} size={size}\r\n                     ref={containerRef}\r\n                     searchTerm={searchTerm}\r\n                     disabled={disabled}\r\n                     validationMessage={validationMessage}>\r\n          <SearchBarInput\r\n            placeholder={disabled ? '' : placeholder}\r\n            id={id}\r\n            size={size}\r\n            disabled={disabled}\r\n            setSearchTerm={(term: string) => setSearchTerm(term)}\r\n            searchTerm={searchTerm}\r\n            onKeyDown={onKeyDown}\r\n            enterSearch={enterSearch}\r\n            focusParentRefs={[containerRef]}\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        <ErrorMessage className={size || ''}>\r\n          <TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\r\n          <span>{validationMessage}</span>\r\n        </ErrorMessage>\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default SearchBar;\r\n"],"file":"SearchBar.cjs"}
+{"version":3,"sources":["../../src/InputFields/SearchBar.tsx"],"names":["ClearIconWrapper","styled","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","containerRef","React","useRef","isPressingEnter","e","key","preventDefault","stopPropagation","term","concat","COLORS","critical_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 {ErrorMessage, InputWrapper, SearchIconWrapper} 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 containerRef = React.useRef<any>(null);\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'} size={size}\n                     ref={containerRef}\n                     searchTerm={searchTerm}\n                     disabled={disabled}\n                     validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enterSearch}\n            focusParentRefs={[containerRef]}\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        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"file":"SearchBar.cjs"}