@laerdal/life-react-components 5.0.5-dev.1 → 5.0.5-dev.3

package/dist/InputFields/QuickSearch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"QuickSearch.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_Iconbutton","_styling","_types","_","_icons","_SearchBarInput","_interopRequireDefault","_SearchField","_jsxRuntime","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Wrapper","styled","div","_taggedTemplateLiteral2","StyledSearchField","props","COLORS","getColor","theme","IconButtonStyledSecondary","$shouldNotInteract","QuickSearch","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","useTheme","searchFieldRef","useRef","searchFieldInputRef","_React$useState","useState","visible","_React$useState2","_slicedToArray2","searchFieldVisible","setSearchFieldVisible","handleClickOutside","current","contains","target","length","handleKeyDown","key","handleBlur","_searchFieldRef$curre","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","_searchFieldInputRef$","focusVisible","jsx","children","jsxs","ref","style","onBlur","className","term","focusParentRefs","SearchIconWrapper","role","concat","dataTestId","variant","shape","tabIndex","action","SystemIcons","Search","color","StyledIcon","hidden","_searchFieldInputRef$2","Clear","LoadingIndicator","Size","Small","propTypes","_propTypes","string","isRequired","func","bool","_default","exports"],"sources":["../../src/InputFields/QuickSearch.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\n\r\nimport IconButton, { IconButtonStyledSecondary } from '../Button/Iconbutton';\r\nimport { SearchIconWrapper, StyledIcon } from './styling';\r\nimport { Size } from '../types';\r\nimport { COLORS, LoadingIndicator } from '..';\r\nimport { SystemIcons } from '../icons';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField, { StyledSearchField } from './components/SearchField';\r\n\r\nconst Wrapper = styled.div<{$shouldNotInteract: boolean}>`\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: ${props => COLORS.getColor('white', props.theme)};\r\n      box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n    }\r\n\r\n    &.expanded:hover,\r\n    &.expanded:focus-within {\r\n      box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  ${IconButtonStyledSecondary} {\r\n    pointer-events: ${(props) => (props.$shouldNotInteract ? 'none' : 'auto')};\r\n  }\r\n`;\r\n\r\nexport type QuickSearchProps = {\r\n  /** Required. Id of the component. */\r\n  id: string;\r\n  /** Optional. Current search term entered by the user. */\r\n  searchTerm?: string;\r\n  /** Required. Handler to be called when user modified input. */\r\n  setSearchTerm: (term: string) => void;\r\n  /** Required. Handler to be called when user triggers search. */\r\n  enterSearch: (e: any) => void;\r\n  /** Required. Handler to be called when user clears input field. */\r\n  removeSearch: (e: any) => void;\r\n  /** Optional. Placeholder text to be shown in the input field when there is no input. */\r\n  placeholder?: string;\r\n  /** Optional. ARIA label to set on the input field. */\r\n  performSearchLabel?: string;\r\n  /** Optional. If disabled user can not interact with the search bar. */\r\n  disabled?: boolean;\r\n  /** Optional. Optional onkeydown handler to be set on the input field. */\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  /** Optional. Size of the component. Defaults to 'medium'.   */\r\n  size?: Size.Small | Size.Medium;\r\n  /** Optional. Margin style attribute to be set on the input field. */\r\n  margin?: string;\r\n  /** Optional. If set then loading indicator will be shown on the right side of the input field. */\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 theme = useTheme();\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 $shouldNotInteract={searchFieldVisible?.visible}>\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            id={`${id}_Searchbutton`}\r\n            dataTestId={`${id}_Searchbutton`}\r\n            variant=\"secondary\"\r\n            shape=\"circular\"\r\n            tabIndex={searchFieldVisible?.visible ? -1 : 0}\r\n            action={handleSearchIconAction}>\r\n            <SystemIcons.Search size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\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            dataTestId={`${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            <SystemIcons.Clear size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\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.getColor('neutral_600', theme)} />\r\n          </StyledIcon>\r\n        )}\r\n      </SearchField>\r\n    </Wrapper>\r\n  );\r\n};\r\n\r\nexport default QuickSearch;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"QuickSearch.cjs","names":["Wrapper","styled","div","StyledSearchField","props","COLORS","getColor","theme","IconButtonStyledSecondary","$shouldNotInteract","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","useTheme","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","Size","Small"],"sources":["../../src/InputFields/QuickSearch.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\n\r\nimport IconButton, { IconButtonStyledSecondary } from '../Button/Iconbutton';\r\nimport { SearchIconWrapper, StyledIcon } from './styling';\r\nimport { Size } from '../types';\r\nimport { COLORS, LoadingIndicator } from '..';\r\nimport { SystemIcons } from '../icons';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField, { StyledSearchField } from './components/SearchField';\r\n\r\nconst Wrapper = styled.div<{$shouldNotInteract: boolean}>`\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: ${props => COLORS.getColor('white', props.theme)};\r\n      box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n    }\r\n\r\n    &.expanded:hover,\r\n    &.expanded:focus-within {\r\n      box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  ${IconButtonStyledSecondary} {\r\n    pointer-events: ${(props) => (props.$shouldNotInteract ? 'none' : 'auto')};\r\n  }\r\n`;\r\n\r\nexport type QuickSearchProps = {\r\n  /** Required. Id of the component. */\r\n  id: string;\r\n  /** Optional. Current search term entered by the user. */\r\n  searchTerm?: string;\r\n  /** Required. Handler to be called when user modified input. */\r\n  setSearchTerm: (term: string) => void;\r\n  /** Required. Handler to be called when user triggers search. */\r\n  enterSearch: (e: any) => void;\r\n  /** Required. Handler to be called when user clears input field. */\r\n  removeSearch: (e: any) => void;\r\n  /** Optional. Placeholder text to be shown in the input field when there is no input. */\r\n  placeholder?: string;\r\n  /** Optional. ARIA label to set on the input field. */\r\n  performSearchLabel?: string;\r\n  /** Optional. If disabled user can not interact with the search bar. */\r\n  disabled?: boolean;\r\n  /** Optional. Optional onkeydown handler to be set on the input field. */\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  /** Optional. Size of the component. Defaults to 'medium'.   */\r\n  size?: Size.Small | Size.Medium;\r\n  /** Optional. Margin style attribute to be set on the input field. */\r\n  margin?: string;\r\n  /** Optional. If set then loading indicator will be shown on the right side of the input field. */\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 theme = useTheme();\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 $shouldNotInteract={searchFieldVisible?.visible}>\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            id={`${id}_Searchbutton`}\r\n            dataTestId={`${id}_Searchbutton`}\r\n            variant=\"secondary\"\r\n            shape=\"circular\"\r\n            tabIndex={searchFieldVisible?.visible ? -1 : 0}\r\n            action={handleSearchIconAction}>\r\n            <SystemIcons.Search size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\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            dataTestId={`${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            <SystemIcons.Clear size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\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.getColor('neutral_600', theme)} />\r\n          </StyledIcon>\r\n        )}\r\n      </SearchField>\r\n    </Wrapper>\r\n  );\r\n};\r\n\r\nexport default QuickSearch;\r\n"],"mappings":"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"}

package/dist/InputFields/QuickSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickSearch.js","names":["React","styled","useTheme","IconButton","IconButtonStyledSecondary","SearchIconWrapper","StyledIcon","Size","COLORS","LoadingIndicator","SystemIcons","SearchBarInput","SearchField","StyledSearchField","jsx","_jsx","jsxs","_jsxs","Wrapper","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","$shouldNotInteract","QuickSearch","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","searchFieldRef","useRef","searchFieldInputRef","_React$useState","useState","visible","_React$useState2","_slicedToArray","searchFieldVisible","setSearchFieldVisible","handleClickOutside","e","current","contains","target","length","handleKeyDown","key","handleBlur","_searchFieldRef$curre","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","_searchFieldInputRef$","focusVisible","children","ref","style","onBlur","className","term","focusParentRefs","role","concat","dataTestId","variant","shape","tabIndex","action","Search","color","hidden","_searchFieldInputRef$2","Clear","Small","propTypes","_pt","string","isRequired","func","bool"],"sources":["../../src/InputFields/QuickSearch.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\n\r\nimport IconButton, { IconButtonStyledSecondary } from '../Button/Iconbutton';\r\nimport { SearchIconWrapper, StyledIcon } from './styling';\r\nimport { Size } from '../types';\r\nimport { COLORS, LoadingIndicator } from '..';\r\nimport { SystemIcons } from '../icons';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField, { StyledSearchField } from './components/SearchField';\r\n\r\nconst Wrapper = styled.div<{$shouldNotInteract: boolean}>`\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: ${props => COLORS.getColor('white', props.theme)};\r\n      box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n    }\r\n\r\n    &.expanded:hover,\r\n    &.expanded:focus-within {\r\n      box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  ${IconButtonStyledSecondary} {\r\n    pointer-events: ${(props) => (props.$shouldNotInteract ? 'none' : 'auto')};\r\n  }\r\n`;\r\n\r\nexport type QuickSearchProps = {\r\n  /** Required. Id of the component. */\r\n  id: string;\r\n  /** Optional. Current search term entered by the user. */\r\n  searchTerm?: string;\r\n  /** Required. Handler to be called when user modified input. */\r\n  setSearchTerm: (term: string) => void;\r\n  /** Required. Handler to be called when user triggers search. */\r\n  enterSearch: (e: any) => void;\r\n  /** Required. Handler to be called when user clears input field. */\r\n  removeSearch: (e: any) => void;\r\n  /** Optional. Placeholder text to be shown in the input field when there is no input. */\r\n  placeholder?: string;\r\n  /** Optional. ARIA label to set on the input field. */\r\n  performSearchLabel?: string;\r\n  /** Optional. If disabled user can not interact with the search bar. */\r\n  disabled?: boolean;\r\n  /** Optional. Optional onkeydown handler to be set on the input field. */\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  /** Optional. Size of the component. Defaults to 'medium'.   */\r\n  size?: Size.Small | Size.Medium;\r\n  /** Optional. Margin style attribute to be set on the input field. */\r\n  margin?: string;\r\n  /** Optional. If set then loading indicator will be shown on the right side of the input field. */\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 theme = useTheme();\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 $shouldNotInteract={searchFieldVisible?.visible}>\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            id={`${id}_Searchbutton`}\r\n            dataTestId={`${id}_Searchbutton`}\r\n            variant=\"secondary\"\r\n            shape=\"circular\"\r\n            tabIndex={searchFieldVisible?.visible ? -1 : 0}\r\n            action={handleSearchIconAction}>\r\n            <SystemIcons.Search size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\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            dataTestId={`${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            <SystemIcons.Clear size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\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.getColor('neutral_600', theme)} />\r\n          </StyledIcon>\r\n        )}\r\n      </SearchField>\r\n    </Wrapper>\r\n  );\r\n};\r\n\r\nexport default QuickSearch;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"QuickSearch.js","names":["React","styled","useTheme","IconButton","IconButtonStyledSecondary","SearchIconWrapper","StyledIcon","Size","COLORS","LoadingIndicator","SystemIcons","SearchBarInput","SearchField","StyledSearchField","Wrapper","div","props","getColor","theme","$shouldNotInteract","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","Small"],"sources":["../../src/InputFields/QuickSearch.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\n\r\nimport IconButton, { IconButtonStyledSecondary } from '../Button/Iconbutton';\r\nimport { SearchIconWrapper, StyledIcon } from './styling';\r\nimport { Size } from '../types';\r\nimport { COLORS, LoadingIndicator } from '..';\r\nimport { SystemIcons } from '../icons';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField, { StyledSearchField } from './components/SearchField';\r\n\r\nconst Wrapper = styled.div<{$shouldNotInteract: boolean}>`\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: ${props => COLORS.getColor('white', props.theme)};\r\n      box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n    }\r\n\r\n    &.expanded:hover,\r\n    &.expanded:focus-within {\r\n      box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  ${IconButtonStyledSecondary} {\r\n    pointer-events: ${(props) => (props.$shouldNotInteract ? 'none' : 'auto')};\r\n  }\r\n`;\r\n\r\nexport type QuickSearchProps = {\r\n  /** Required. Id of the component. */\r\n  id: string;\r\n  /** Optional. Current search term entered by the user. */\r\n  searchTerm?: string;\r\n  /** Required. Handler to be called when user modified input. */\r\n  setSearchTerm: (term: string) => void;\r\n  /** Required. Handler to be called when user triggers search. */\r\n  enterSearch: (e: any) => void;\r\n  /** Required. Handler to be called when user clears input field. */\r\n  removeSearch: (e: any) => void;\r\n  /** Optional. Placeholder text to be shown in the input field when there is no input. */\r\n  placeholder?: string;\r\n  /** Optional. ARIA label to set on the input field. */\r\n  performSearchLabel?: string;\r\n  /** Optional. If disabled user can not interact with the search bar. */\r\n  disabled?: boolean;\r\n  /** Optional. Optional onkeydown handler to be set on the input field. */\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  /** Optional. Size of the component. Defaults to 'medium'.   */\r\n  size?: Size.Small | Size.Medium;\r\n  /** Optional. Margin style attribute to be set on the input field. */\r\n  margin?: string;\r\n  /** Optional. If set then loading indicator will be shown on the right side of the input field. */\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 theme = useTheme();\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 $shouldNotInteract={searchFieldVisible?.visible}>\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            id={`${id}_Searchbutton`}\r\n            dataTestId={`${id}_Searchbutton`}\r\n            variant=\"secondary\"\r\n            shape=\"circular\"\r\n            tabIndex={searchFieldVisible?.visible ? -1 : 0}\r\n            action={handleSearchIconAction}>\r\n            <SystemIcons.Search size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\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            dataTestId={`${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            <SystemIcons.Clear size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\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.getColor('neutral_600', theme)} />\r\n          </StyledIcon>\r\n        )}\r\n      </SearchField>\r\n    </Wrapper>\r\n  );\r\n};\r\n\r\nexport default QuickSearch;\r\n"],"mappings":"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"}

package/dist/InputFields/RadioButton.cjs

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -19,11 +19,11 @@ var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["id", "selected", "label", "additionalLabel", "invalid", "select", "disabled", "margin", "iconPointerEventsTransparent", "size", "tabIndexVal", "className", "dataTestId"];
 var _templateObject;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var StyledRadioButton = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n\n  color: ", ";\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: ", ";\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      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ", "\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ", ";\n    }\n\n    .radio-button-icon svg {\n      color: ", ";\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) {
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var StyledRadioButton = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n\n  color: ", ";\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: ", ";\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      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ", "\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ", ";\n    }\n\n    .radio-button-icon svg {\n      color: ", ";\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) {
   return props.$margin ? "margin: ".concat(props.$margin, ";") : '';
 }, function (props) {
   return _styles.COLORS.getColor('black', props.theme);
@@ -71,7 +71,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     tabIndexVal = _ref.tabIndexVal,
     className = _ref.className,
     dataTestId = _ref.dataTestId,
-    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var onKeyPress = function onKeyPress(e) {
     if (e.keyCode === 13 && !disabled) {
       select(!selected);
@@ -116,18 +116,18 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }), id);
 });
 RadioButton.propTypes = {
-  id: _propTypes["default"].string,
-  selected: _propTypes["default"].bool.isRequired,
-  select: _propTypes["default"].func.isRequired,
-  label: _propTypes["default"].string,
-  additionalLabel: _propTypes["default"].string,
-  invalid: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool,
-  iconPointerEventsTransparent: _propTypes["default"].bool,
-  margin: _propTypes["default"].string,
-  tabIndexVal: _propTypes["default"].number,
-  className: _propTypes["default"].string
+  id: _propTypes.default.string,
+  selected: _propTypes.default.bool.isRequired,
+  select: _propTypes.default.func.isRequired,
+  label: _propTypes.default.string,
+  additionalLabel: _propTypes.default.string,
+  invalid: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  iconPointerEventsTransparent: _propTypes.default.bool,
+  margin: _propTypes.default.string,
+  tabIndexVal: _propTypes.default.number,
+  className: _propTypes.default.string
 };
 var _default = RadioButton;
-exports["default"] = _default;
+exports.default = _default;
 //# sourceMappingURL=RadioButton.cjs.map

package/dist/InputFields/RadioButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_icons","_styles","_types","_common","_jsxRuntime","_excluded","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","StyledRadioButton","styled","div","_taggedTemplateLiteral2","props","$margin","concat","COLORS","getColor","theme","$selected","$invalid","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","ComponentMStyling","ComponentLStyling","focusStyles","RadioButton","forwardRef","_ref","ref","_size","id","selected","label","additionalLabel","invalid","select","disabled","margin","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","_objectWithoutProperties2","onKeyPress","keyCode","Size","Medium","cls","jsxs","onClick","onMouseDown","defaultOnMouseDownHandler","onKeyDown","$disabled","tabIndex","children","jsx","SystemIcons","RadioButtonOn","RadioButtonOff","htmlFor","undefined","propTypes","_propTypes","string","bool","isRequired","func","number","_default","exports"],"sources":["../../src/InputFields/RadioButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size, Testable} 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: ${props => COLORS.getColor('black', props.theme)};\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.getColor('primary_500', props.theme) : props.$invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme))};\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      ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .radio-button-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .radio-button-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\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: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):active {\r\n    .radio-button-icon {\r\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\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: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n\r\n    .radio-button-icon svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.dropdown-hover:not(.disabled) {\r\n    .radio-button-icon {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'> & {\r\n  /** Optional. Id of the component */\r\n  id?: string;\r\n  /** Required. Current state of the component. */\r\n  selected: boolean;\r\n  /** Required. Handler to be called when user selects/unselected the radio button. */\r\n  select: (selected: boolean) => void;\r\n  /** Optional. Label to be shown on the right side of the radio button. */\r\n  label?: string;\r\n  /** Optional. Secondary label to be shown under the main 'label' */\r\n  additionalLabel?: string;\r\n  /** Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. */\r\n  invalid?: boolean;\r\n  /** Optional. If disabled, user can not interact with the component. */\r\n  disabled?: boolean;\r\n  /** Optional. If set, then 'pointer-events: none' will be set on the component. */\r\n  iconPointerEventsTransparent?: boolean;\r\n  /** Optional. Margin style attribute to be set on the top level tag of the component. */\r\n  margin?: string;\r\n  /** Optional. Size of the radio button, defaults to 'medium'. */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Optional. TabIndex attribute to be set on the component. */\r\n  tabIndexVal?: number;\r\n  /** Optional. Extra classname to be set on the container of the component. */\r\n  className?: string;\r\n}\r\n\r\nconst RadioButton = React.forwardRef<HTMLDivElement, RadioButtonProps>(({\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                                                               dataTestId,\r\n                                                               ...rest\r\n                                                             }: RadioButtonProps, 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}\r\n                       $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                       {...rest}>\r\n      <div className={'radio-button-icon'} id={id} data-testid={dataTestId}>\r\n        {selected && <SystemIcons.RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n        {!selected &&\r\n          <SystemIcons.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"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"RadioButton.cjs","names":["StyledRadioButton","styled","div","props","$margin","COLORS","getColor","theme","$selected","$invalid","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","ComponentMStyling","ComponentLStyling","focusStyles","RadioButton","React","forwardRef","ref","id","selected","label","additionalLabel","invalid","select","disabled","margin","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","onKeyPress","e","keyCode","Size","Medium","cls","defaultOnMouseDownHandler","undefined"],"sources":["../../src/InputFields/RadioButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size, Testable} 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: ${props => COLORS.getColor('black', props.theme)};\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.getColor('primary_500', props.theme) : props.$invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme))};\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      ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .radio-button-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .radio-button-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\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: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):active {\r\n    .radio-button-icon {\r\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\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: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n\r\n    .radio-button-icon svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.dropdown-hover:not(.disabled) {\r\n    .radio-button-icon {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'> & {\r\n  /** Optional. Id of the component */\r\n  id?: string;\r\n  /** Required. Current state of the component. */\r\n  selected: boolean;\r\n  /** Required. Handler to be called when user selects/unselected the radio button. */\r\n  select: (selected: boolean) => void;\r\n  /** Optional. Label to be shown on the right side of the radio button. */\r\n  label?: string;\r\n  /** Optional. Secondary label to be shown under the main 'label' */\r\n  additionalLabel?: string;\r\n  /** Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. */\r\n  invalid?: boolean;\r\n  /** Optional. If disabled, user can not interact with the component. */\r\n  disabled?: boolean;\r\n  /** Optional. If set, then 'pointer-events: none' will be set on the component. */\r\n  iconPointerEventsTransparent?: boolean;\r\n  /** Optional. Margin style attribute to be set on the top level tag of the component. */\r\n  margin?: string;\r\n  /** Optional. Size of the radio button, defaults to 'medium'. */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Optional. TabIndex attribute to be set on the component. */\r\n  tabIndexVal?: number;\r\n  /** Optional. Extra classname to be set on the container of the component. */\r\n  className?: string;\r\n}\r\n\r\nconst RadioButton = React.forwardRef<HTMLDivElement, RadioButtonProps>(({\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                                                               dataTestId,\r\n                                                               ...rest\r\n                                                             }: RadioButtonProps, 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}\r\n                       $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                       {...rest}>\r\n      <div className={'radio-button-icon'} id={id} data-testid={dataTestId}>\r\n        {selected && <SystemIcons.RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n        {!selected &&\r\n          <SystemIcons.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"],"mappings":"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"}

package/dist/InputFields/RadioButton.js

@@ -4,8 +4,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
 import _pt from "prop-types";
 var _excluded = ["id", "selected", "label", "additionalLabel", "invalid", "select", "disabled", "margin", "iconPointerEventsTransparent", "size", "tabIndexVal", "className", "dataTestId"];
 var _templateObject;
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import * as React from 'react';
 import styled from 'styled-components';
 import { SystemIcons } from '../icons';

package/dist/InputFields/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","StyledRadioButton","div","_templateObject","_taggedTemplateLiteral","props","$margin","concat","getColor","theme","$selected","$invalid","Regular","RadioButton","forwardRef","_ref","ref","_size","id","selected","label","additionalLabel","invalid","select","disabled","margin","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","_objectWithoutProperties","_excluded","onKeyPress","e","keyCode","Medium","cls","_objectSpread","onClick","onMouseDown","onKeyDown","$disabled","tabIndex","children","RadioButtonOn","RadioButtonOff","htmlFor","undefined","propTypes","_pt","string","bool","isRequired","func","number"],"sources":["../../src/InputFields/RadioButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size, Testable} 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: ${props => COLORS.getColor('black', props.theme)};\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.getColor('primary_500', props.theme) : props.$invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme))};\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      ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .radio-button-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .radio-button-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\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: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):active {\r\n    .radio-button-icon {\r\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\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: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n\r\n    .radio-button-icon svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.dropdown-hover:not(.disabled) {\r\n    .radio-button-icon {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'> & {\r\n  /** Optional. Id of the component */\r\n  id?: string;\r\n  /** Required. Current state of the component. */\r\n  selected: boolean;\r\n  /** Required. Handler to be called when user selects/unselected the radio button. */\r\n  select: (selected: boolean) => void;\r\n  /** Optional. Label to be shown on the right side of the radio button. */\r\n  label?: string;\r\n  /** Optional. Secondary label to be shown under the main 'label' */\r\n  additionalLabel?: string;\r\n  /** Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. */\r\n  invalid?: boolean;\r\n  /** Optional. If disabled, user can not interact with the component. */\r\n  disabled?: boolean;\r\n  /** Optional. If set, then 'pointer-events: none' will be set on the component. */\r\n  iconPointerEventsTransparent?: boolean;\r\n  /** Optional. Margin style attribute to be set on the top level tag of the component. */\r\n  margin?: string;\r\n  /** Optional. Size of the radio button, defaults to 'medium'. */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Optional. TabIndex attribute to be set on the component. */\r\n  tabIndexVal?: number;\r\n  /** Optional. Extra classname to be set on the container of the component. */\r\n  className?: string;\r\n}\r\n\r\nconst RadioButton = React.forwardRef<HTMLDivElement, RadioButtonProps>(({\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                                                               dataTestId,\r\n                                                               ...rest\r\n                                                             }: RadioButtonProps, 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}\r\n                       $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                       {...rest}>\r\n      <div className={'radio-button-icon'} id={id} data-testid={dataTestId}>\r\n        {selected && <SystemIcons.RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n        {!selected &&\r\n          <SystemIcons.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"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"RadioButton.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","StyledRadioButton","div","props","$margin","getColor","theme","$selected","$invalid","Regular","RadioButton","forwardRef","ref","id","selected","label","additionalLabel","invalid","select","disabled","margin","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","onKeyPress","e","keyCode","Medium","cls","undefined"],"sources":["../../src/InputFields/RadioButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size, Testable} 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: ${props => COLORS.getColor('black', props.theme)};\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.getColor('primary_500', props.theme) : props.$invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme))};\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      ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .radio-button-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .radio-button-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\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: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):active {\r\n    .radio-button-icon {\r\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\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: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n\r\n    .radio-button-icon svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.dropdown-hover:not(.disabled) {\r\n    .radio-button-icon {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'> & {\r\n  /** Optional. Id of the component */\r\n  id?: string;\r\n  /** Required. Current state of the component. */\r\n  selected: boolean;\r\n  /** Required. Handler to be called when user selects/unselected the radio button. */\r\n  select: (selected: boolean) => void;\r\n  /** Optional. Label to be shown on the right side of the radio button. */\r\n  label?: string;\r\n  /** Optional. Secondary label to be shown under the main 'label' */\r\n  additionalLabel?: string;\r\n  /** Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. */\r\n  invalid?: boolean;\r\n  /** Optional. If disabled, user can not interact with the component. */\r\n  disabled?: boolean;\r\n  /** Optional. If set, then 'pointer-events: none' will be set on the component. */\r\n  iconPointerEventsTransparent?: boolean;\r\n  /** Optional. Margin style attribute to be set on the top level tag of the component. */\r\n  margin?: string;\r\n  /** Optional. Size of the radio button, defaults to 'medium'. */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Optional. TabIndex attribute to be set on the component. */\r\n  tabIndexVal?: number;\r\n  /** Optional. Extra classname to be set on the container of the component. */\r\n  className?: string;\r\n}\r\n\r\nconst RadioButton = React.forwardRef<HTMLDivElement, RadioButtonProps>(({\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                                                               dataTestId,\r\n                                                               ...rest\r\n                                                             }: RadioButtonProps, 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}\r\n                       $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                       {...rest}>\r\n      <div className={'radio-button-icon'} id={id} data-testid={dataTestId}>\r\n        {selected && <SystemIcons.RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n        {!selected &&\r\n          <SystemIcons.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"],"mappings":"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"}

package/dist/InputFields/ResponsiveComponentWrapper.cjs

@@ -5,15 +5,15 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _types = require("../types");
 var _styles = require("../styles");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
  * Import React libraries.
  */
@@ -22,14 +22,12 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * Import custom styles.
  */
 
-// Add component-specific types
-
 var ReponsiveComponentWrapper = function ReponsiveComponentWrapper(_ref) {
   var children = _ref.children,
     size = _ref.size;
   // Globally used variables within the component
   var _React$useState = React.useState(false),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     isMediumView = _React$useState2[0],
     setIsMediumView = _React$useState2[1];
   React.useEffect(function () {
@@ -53,8 +51,8 @@ var ReponsiveComponentWrapper = function ReponsiveComponentWrapper(_ref) {
   });
 };
 ReponsiveComponentWrapper.propTypes = {
-  children: _propTypes["default"].any
+  children: _propTypes.default.any
 };
 var _default = ReponsiveComponentWrapper;
-exports["default"] = _default;
+exports.default = _default;
 //# sourceMappingURL=ResponsiveComponentWrapper.cjs.map

package/dist/InputFields/ResponsiveComponentWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveComponentWrapper.cjs","names":["React","_interopRequireWildcard","require","_types","_styles","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ReponsiveComponentWrapper","_ref","children","size","_React$useState","useState","_React$useState2","_slicedToArray2","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","concat","BREAKPOINTS","MEDIUM","replace","matches","addEventListener","removeEventListener","Size","Medium","jsx","ComponentXS","Small","ComponentXXS","propTypes","_propTypes","any","_default","exports"],"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"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 () => window.removeEventListener('resize', handleResize);\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"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ResponsiveComponentWrapper.cjs","names":["ReponsiveComponentWrapper","children","size","React","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","BREAKPOINTS","MEDIUM","replace","matches","addEventListener","removeEventListener","Size","Medium","Small"],"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"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 () => window.removeEventListener('resize', handleResize);\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"],"mappings":";;;;;;;;;;AAGA;AACA;AAKA;AAAmE;AAAA;AAAA;AATnE;AACA;AACA;;AAIA;AACA;AACA;;AASA,IAAMA,yBAA8D,GAAG,SAAjEA,yBAA8D,OAAuC;EAAA,IAAjCC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;EACtF;EACA,sBAAwCC,KAAK,CAACC,QAAQ,CAAU,KAAK,CAAC;IAAA;IAA/DC,YAAY;IAAEC,eAAe;EAEpCH,KAAK,CAACI,SAAS,CAAC,YAAM;IACpB,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;MACzB,IAAMC,GAAG,GAAGC,MAAM,CAACC,UAAU,WAAIC,mBAAW,CAACC,MAAM,CAACC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,EAAG;MAC7ER,eAAe,CAACG,GAAG,CAACM,OAAO,CAAC;IAC9B,CAAC;IACDL,MAAM,CAACM,gBAAgB,CAAC,QAAQ,EAAER,YAAY,CAAC;IAC/C,OAAO;MAAA,OAAME,MAAM,CAACO,mBAAmB,CAAC,QAAQ,EAAET,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAON,IAAI,IAAIA,IAAI,KAAKgB,WAAI,CAACC,MAAM,gBACjC,qBAAC,mBAAW;IAAA,UAAElB;EAAQ,EAAe,GACnCC,IAAI,IAAIA,IAAI,KAAKgB,WAAI,CAACE,KAAK,gBAC7B,qBAAC,oBAAY;IAAA,UAAEnB;EAAQ,EAAgB,GACrCI,YAAY,gBACd,qBAAC,mBAAW;IAAA,UAAEJ;EAAQ,EAAe,gBAErC,qBAAC,oBAAY;IAAA,UAAEA;EAAQ,EACxB;AACH,CAAC;AAAC;EAzBAA,QAAQ;AAAA;AAAA,eA2BKD,yBAAyB;AAAA"}

package/dist/InputFields/ResponsiveComponentWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveComponentWrapper.js","names":["React","Size","BREAKPOINTS","ComponentXXS","ComponentXS","jsx","_jsx","ReponsiveComponentWrapper","_ref","children","size","_React$useState","useState","_React$useState2","_slicedToArray","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","concat","MEDIUM","replace","matches","addEventListener","removeEventListener","Medium","Small","propTypes","_pt","any"],"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"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 () => window.removeEventListener('resize', handleResize);\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"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,QAAQ,UAAU;;AAE/B;AACA;AACA;AACA,SAASC,WAAW,EAAEC,YAAY,EAAEC,WAAW,QAAQ,WAAW;;AAElE;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAMA,IAAMC,yBAA8D,GAAG,SAAjEA,yBAA8DA,CAAAC,IAAA,EAAuC;EAAA,IAAjCC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEC,IAAI,GAAAF,IAAA,CAAJE,IAAI;EACtF;EACA,IAAAC,eAAA,GAAwCX,KAAK,CAACY,QAAQ,CAAU,KAAK,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAH,eAAA;IAA/DI,YAAY,GAAAF,gBAAA;IAAEG,eAAe,GAAAH,gBAAA;EAEpCb,KAAK,CAACiB,SAAS,CAAC,YAAM;IACpB,IAAMC,YAAY,GAAG,SAAfA,YAAYA,CAAA,EAAS;MACzB,IAAMC,GAAG,GAAGC,MAAM,CAACC,UAAU,IAAAC,MAAA,CAAIpB,WAAW,CAACqB,MAAM,CAACC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAE,CAAC;MAC7ER,eAAe,CAACG,GAAG,CAACM,OAAO,CAAC;IAC9B,CAAC;IACDL,MAAM,CAACM,gBAAgB,CAAC,QAAQ,EAAER,YAAY,CAAC;IAC/C,OAAO;MAAA,OAAME,MAAM,CAACO,mBAAmB,CAAC,QAAQ,EAAET,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOR,IAAI,IAAIA,IAAI,KAAKT,IAAI,CAAC2B,MAAM,gBACjCtB,IAAA,CAACF,WAAW;IAAAK,QAAA,EAAEA;EAAQ,CAAc,CAAC,GACnCC,IAAI,IAAIA,IAAI,KAAKT,IAAI,CAAC4B,KAAK,gBAC7BvB,IAAA,CAACH,YAAY;IAAAM,QAAA,EAAEA;EAAQ,CAAe,CAAC,GACrCM,YAAY,gBACdT,IAAA,CAACF,WAAW;IAAAK,QAAA,EAAEA;EAAQ,CAAc,CAAC,gBAErCH,IAAA,CAACH,YAAY;IAAAM,QAAA,EAAEA;EAAQ,CAAe,CACvC;AACH,CAAC;AAACF,yBAAA,CAAAuB,SAAA;EAzBArB,QAAQ,EAAAsB,GAAA,CAAAC;AAAA;AA2BV,eAAezB,yBAAyB","ignoreList":[]}
+{"version":3,"file":"ResponsiveComponentWrapper.js","names":["React","Size","BREAKPOINTS","ComponentXXS","ComponentXS","ReponsiveComponentWrapper","children","size","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","MEDIUM","replace","matches","addEventListener","removeEventListener","Medium","Small"],"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"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 () => window.removeEventListener('resize', handleResize);\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"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,QAAQ,UAAU;;AAE/B;AACA;AACA;AACA,SAASC,WAAW,EAAEC,YAAY,EAAEC,WAAW,QAAQ,WAAW;;AAElE;AAAA;AAMA,IAAMC,yBAA8D,GAAG,SAAjEA,yBAA8D,OAAuC;EAAA,IAAjCC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;EACtF;EACA,sBAAwCP,KAAK,CAACQ,QAAQ,CAAU,KAAK,CAAC;IAAA;IAA/DC,YAAY;IAAEC,eAAe;EAEpCV,KAAK,CAACW,SAAS,CAAC,YAAM;IACpB,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;MACzB,IAAMC,GAAG,GAAGC,MAAM,CAACC,UAAU,WAAIb,WAAW,CAACc,MAAM,CAACC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,EAAG;MAC7EP,eAAe,CAACG,GAAG,CAACK,OAAO,CAAC;IAC9B,CAAC;IACDJ,MAAM,CAACK,gBAAgB,CAAC,QAAQ,EAAEP,YAAY,CAAC;IAC/C,OAAO;MAAA,OAAME,MAAM,CAACM,mBAAmB,CAAC,QAAQ,EAAER,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOL,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACoB,MAAM,gBACjC,KAAC,WAAW;IAAA,UAAEf;EAAQ,EAAe,GACnCC,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACqB,KAAK,gBAC7B,KAAC,YAAY;IAAA,UAAEhB;EAAQ,EAAgB,GACrCG,YAAY,gBACd,KAAC,WAAW;IAAA,UAAEH;EAAQ,EAAe,gBAErC,KAAC,YAAY;IAAA,UAAEA;EAAQ,EACxB;AACH,CAAC;AAAC;EAzBAA,QAAQ;AAAA;AA2BV,eAAeD,yBAAyB"}