@laerdal/life-react-components 2.3.1-dev.9 → 3.0.1-dev.1

package/dist/InputFields/SearchBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.cjs","names":["ClearIconWrapper","styled","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","React","useRef","useState","isOpen","setIsOpen","dropdownRef","useClickOutsideRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","COLORS","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {SystemIcons} from '../icons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport { DropdownContent, DropdownItem } from '../Dropdown';\nimport { useClickOutsideRef } from '../common';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  showDropdown?: boolean;\n  dropdownButtonIcon?: React.ReactNode;\n  dropdownButtonLabel?: string;\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\n  dropdownButtonAction?: () => boolean | void | undefined;\n  searchList?: DropdownItem[];\n  addToSearchList?: (e: DropdownItem) => void;\n  dropdownScrollable?: boolean;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n                                                             id,\n                                                             searchTerm,\n                                                             setSearchTerm,\n                                                             enterSearch,\n                                                             removeSearch,\n                                                             placeholder,\n                                                             performSearchLabel,\n                                                             disabled,\n                                                             validationMessage,\n                                                             onKeyDown,\n                                                             size,\n                                                             margin,\n                                                             showDropdown,\n                                                             dropdownButtonIcon,\n                                                             dropdownButtonLabel,\n                                                             dropdownButtonVariant,\n                                                             dropdownButtonAction,\n                                                             searchList=[],\n                                                             addToSearchList,\n                                                             dropdownScrollable\n                                                           }) => {\n  const containerRef = React.useRef<any>(null);\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  const enteredSearchTerm = (e: any) => {\n    addToSearchList && addToSearchList({value:e.target.value});\n    enterSearch(e);\n  }\n\n  const dropdownAction = () => {\n    if(dropdownButtonAction)\n      dropdownButtonAction();    \n  }\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={'id'} size={size}\n                     ref={containerRef}\n                     searchTerm={searchTerm}\n                     disabled={disabled}\n                     validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enteredSearchTerm}\n            focusParentRefs={[containerRef]}\n            onClick={()=>setIsOpen(!isOpen)}\n            ref={dropdownRef}\n          />\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SystemIcons.Search size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <SystemIcons.Clear size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n\n      {showDropdown && <DropdownContent id={'search'}\n                                        containerRef={containerRef}\n          size={size}\n          isButton={false}\n          ariaRolesType=\"input\"\n          customizationProps={{\n            items:searchList,\n            action: dropdownAction,\n            actionLabel: dropdownButtonLabel,\n            actionIcon: dropdownButtonIcon,\n            actionVariant: dropdownButtonVariant,\n            onValueUpdate:(e)=>{},\n            scrollable: dropdownScrollable,\n            pinTopItem: true\n          }}\n          isOpen={isOpen}\n          setIsOpen={setIsOpen}\n          filter={''}\n          selectedValues={searchTerm ? [searchTerm] : []}\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\n          messageOnNoResults={''}\n          focused={null}\n          setFocused={()=>{}}\n        />}\n\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <SystemIcons.TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"mappings":"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"}
+{"version":3,"file":"SearchBar.cjs","names":["ClearIconWrapper","styled","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","React","useRef","useState","isOpen","setIsOpen","dropdownRef","useClickOutsideRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","COLORS","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {SystemIcons} from '../icons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport { DropdownContent, DropdownItem } from '../Dropdown';\nimport { useClickOutsideRef } from '../common';\n\nexport type SearchBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  showDropdown?: boolean;\n  dropdownButtonIcon?: React.ReactNode;\n  dropdownButtonLabel?: string;\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\n  dropdownButtonAction?: () => boolean | void | undefined;\n  searchList?: DropdownItem[];\n  addToSearchList?: (e: DropdownItem) => void;\n  dropdownScrollable?: boolean;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SearchBarProps> = ({\n                                                             id,\n                                                             searchTerm,\n                                                             setSearchTerm,\n                                                             enterSearch,\n                                                             removeSearch,\n                                                             placeholder,\n                                                             performSearchLabel,\n                                                             disabled,\n                                                             validationMessage,\n                                                             onKeyDown,\n                                                             size,\n                                                             margin,\n                                                             showDropdown,\n                                                             dropdownButtonIcon,\n                                                             dropdownButtonLabel,\n                                                             dropdownButtonVariant,\n                                                             dropdownButtonAction,\n                                                             searchList=[],\n                                                             addToSearchList,\n                                                             dropdownScrollable\n                                                           }) => {\n  const containerRef = React.useRef<any>(null);\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  const enteredSearchTerm = (e: any) => {\n    addToSearchList && addToSearchList({value:e.target.value});\n    enterSearch(e);\n  }\n\n  const dropdownAction = () => {\n    if(dropdownButtonAction)\n      dropdownButtonAction();    \n  }\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={'id'} size={size}\n                     ref={containerRef}\n                     searchTerm={searchTerm}\n                     disabled={disabled}\n                     validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enteredSearchTerm}\n            focusParentRefs={[containerRef]}\n            onClick={()=>setIsOpen(!isOpen)}\n            ref={dropdownRef}\n          />\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SystemIcons.Search size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <SystemIcons.Clear size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n\n      {showDropdown && <DropdownContent id={'search'}\n                                        containerRef={containerRef}\n          size={size}\n          isButton={false}\n          ariaRolesType=\"input\"\n          customizationProps={{\n            items:searchList,\n            action: dropdownAction,\n            actionLabel: dropdownButtonLabel,\n            actionIcon: dropdownButtonIcon,\n            actionVariant: dropdownButtonVariant,\n            onValueUpdate:(e)=>{},\n            scrollable: dropdownScrollable,\n            pinTopItem: true\n          }}\n          isOpen={isOpen}\n          setIsOpen={setIsOpen}\n          filter={''}\n          selectedValues={searchTerm ? [searchTerm] : []}\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\n          messageOnNoResults={''}\n          focused={null}\n          setFocused={()=>{}}\n        />}\n\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <SystemIcons.TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"mappings":"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"}

package/dist/InputFields/SearchBar.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Size } from '../types';
 import { DropdownItem } from '../Dropdown';
-type SeachBarProps = {
+export type SearchBarProps = {
     id: string;
     searchTerm?: string;
     setSearchTerm: (term: string) => void;
@@ -23,5 +23,5 @@ type SeachBarProps = {
     addToSearchList?: (e: DropdownItem) => void;
     dropdownScrollable?: boolean;
 };
-declare const SearchBar: React.FunctionComponent<SeachBarProps>;
+declare const SearchBar: React.FunctionComponent<SearchBarProps>;
 export default SearchBar;

package/dist/InputFields/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","names":["React","COLORS","SystemIcons","ErrorMessage","InputWrapper","SearchIconWrapper","IconButton","SearchBarInput","SearchField","styled","DropdownContent","useClickOutsideRef","ClearIconWrapper","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","useRef","useState","isOpen","setIsOpen","dropdownRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {SystemIcons} from '../icons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport { DropdownContent, DropdownItem } from '../Dropdown';\nimport { useClickOutsideRef } from '../common';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  showDropdown?: boolean;\n  dropdownButtonIcon?: React.ReactNode;\n  dropdownButtonLabel?: string;\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\n  dropdownButtonAction?: () => boolean | void | undefined;\n  searchList?: DropdownItem[];\n  addToSearchList?: (e: DropdownItem) => void;\n  dropdownScrollable?: boolean;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n                                                             id,\n                                                             searchTerm,\n                                                             setSearchTerm,\n                                                             enterSearch,\n                                                             removeSearch,\n                                                             placeholder,\n                                                             performSearchLabel,\n                                                             disabled,\n                                                             validationMessage,\n                                                             onKeyDown,\n                                                             size,\n                                                             margin,\n                                                             showDropdown,\n                                                             dropdownButtonIcon,\n                                                             dropdownButtonLabel,\n                                                             dropdownButtonVariant,\n                                                             dropdownButtonAction,\n                                                             searchList=[],\n                                                             addToSearchList,\n                                                             dropdownScrollable\n                                                           }) => {\n  const containerRef = React.useRef<any>(null);\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  const enteredSearchTerm = (e: any) => {\n    addToSearchList && addToSearchList({value:e.target.value});\n    enterSearch(e);\n  }\n\n  const dropdownAction = () => {\n    if(dropdownButtonAction)\n      dropdownButtonAction();    \n  }\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={'id'} size={size}\n                     ref={containerRef}\n                     searchTerm={searchTerm}\n                     disabled={disabled}\n                     validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enteredSearchTerm}\n            focusParentRefs={[containerRef]}\n            onClick={()=>setIsOpen(!isOpen)}\n            ref={dropdownRef}\n          />\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SystemIcons.Search size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <SystemIcons.Clear size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n\n      {showDropdown && <DropdownContent id={'search'}\n                                        containerRef={containerRef}\n          size={size}\n          isButton={false}\n          ariaRolesType=\"input\"\n          customizationProps={{\n            items:searchList,\n            action: dropdownAction,\n            actionLabel: dropdownButtonLabel,\n            actionIcon: dropdownButtonIcon,\n            actionVariant: dropdownButtonVariant,\n            onValueUpdate:(e)=>{},\n            scrollable: dropdownScrollable,\n            pinTopItem: true\n          }}\n          isOpen={isOpen}\n          setIsOpen={setIsOpen}\n          filter={''}\n          selectedValues={searchTerm ? [searchTerm] : []}\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\n          messageOnNoResults={''}\n          focused={null}\n          setFocused={()=>{}}\n        />}\n\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <SystemIcons.TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"mappings":"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"}
+{"version":3,"file":"SearchBar.js","names":["React","COLORS","SystemIcons","ErrorMessage","InputWrapper","SearchIconWrapper","IconButton","SearchBarInput","SearchField","styled","DropdownContent","useClickOutsideRef","ClearIconWrapper","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","useRef","useState","isOpen","setIsOpen","dropdownRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {SystemIcons} from '../icons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport { DropdownContent, DropdownItem } from '../Dropdown';\nimport { useClickOutsideRef } from '../common';\n\nexport type SearchBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  showDropdown?: boolean;\n  dropdownButtonIcon?: React.ReactNode;\n  dropdownButtonLabel?: string;\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\n  dropdownButtonAction?: () => boolean | void | undefined;\n  searchList?: DropdownItem[];\n  addToSearchList?: (e: DropdownItem) => void;\n  dropdownScrollable?: boolean;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SearchBarProps> = ({\n                                                             id,\n                                                             searchTerm,\n                                                             setSearchTerm,\n                                                             enterSearch,\n                                                             removeSearch,\n                                                             placeholder,\n                                                             performSearchLabel,\n                                                             disabled,\n                                                             validationMessage,\n                                                             onKeyDown,\n                                                             size,\n                                                             margin,\n                                                             showDropdown,\n                                                             dropdownButtonIcon,\n                                                             dropdownButtonLabel,\n                                                             dropdownButtonVariant,\n                                                             dropdownButtonAction,\n                                                             searchList=[],\n                                                             addToSearchList,\n                                                             dropdownScrollable\n                                                           }) => {\n  const containerRef = React.useRef<any>(null);\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  const enteredSearchTerm = (e: any) => {\n    addToSearchList && addToSearchList({value:e.target.value});\n    enterSearch(e);\n  }\n\n  const dropdownAction = () => {\n    if(dropdownButtonAction)\n      dropdownButtonAction();    \n  }\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={'id'} size={size}\n                     ref={containerRef}\n                     searchTerm={searchTerm}\n                     disabled={disabled}\n                     validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enteredSearchTerm}\n            focusParentRefs={[containerRef]}\n            onClick={()=>setIsOpen(!isOpen)}\n            ref={dropdownRef}\n          />\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SystemIcons.Search size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <SystemIcons.Clear size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n\n      {showDropdown && <DropdownContent id={'search'}\n                                        containerRef={containerRef}\n          size={size}\n          isButton={false}\n          ariaRolesType=\"input\"\n          customizationProps={{\n            items:searchList,\n            action: dropdownAction,\n            actionLabel: dropdownButtonLabel,\n            actionIcon: dropdownButtonIcon,\n            actionVariant: dropdownButtonVariant,\n            onValueUpdate:(e)=>{},\n            scrollable: dropdownScrollable,\n            pinTopItem: true\n          }}\n          isOpen={isOpen}\n          setIsOpen={setIsOpen}\n          filter={''}\n          selectedValues={searchTerm ? [searchTerm] : []}\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\n          messageOnNoResults={''}\n          focused={null}\n          setFocused={()=>{}}\n        />}\n\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <SystemIcons.TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"mappings":"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"}

package/dist/InputFields/TextField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.cjs","names":["TextField","React","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","dataTestId","rest","elementRef","useFocusVisibleRef","useImperativeHandle","current","cls","States","Invalid","e","preventDefault","undefined","target","Valid","COLORS","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {SystemIcons} from '../icons';\nimport {COLORS} from '../styles';\nimport {Size, States, Testable} from '../types';\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\n\ntype TextFieldProps =\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id'  | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\n  & {\n  id?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nconst TextField = React.forwardRef(({\n                                      id,\n                                      disabled,\n                                      readOnly,\n                                      onChange,\n                                      value,\n                                      validationMessage,\n                                      type,\n                                      autoComplete,\n                                      placeholder,\n                                      required,\n                                      pattern,\n                                      maxLength,\n                                      withoutBorder,\n                                      state,\n                                      size,\n                                      margin,\n                                      note,\n                                      className,\n                                      dataTestId,\n                                      ...rest\n                                    }: TextFieldProps, ref) => {\n  const elementRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          data-testId={dataTestId}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={cls}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={disabled ? undefined : placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage && state !== States.Valid}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n          {...rest}\n        />\n        <TooltipOverflow value={value} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end' position='bottom'>\n          {value}\n        </TooltipOverflow>\n\n        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.correct_400}/> :\n              <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>}\n            <span>{validationMessage}</span>\n          </ValidationMessage>\n        )}\n        {note && !disabled && (\n          <NoteMessage className={size}>\n            {note.icon}\n            <span>{note.message}</span>\n          </NoteMessage>\n        )}\n      </InputWrapper>\n    </>\n  );\n});\n\nexport default TextField;\n"],"mappings":"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"}
+{"version":3,"file":"TextField.cjs","names":["TextField","React","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","dataTestId","rest","elementRef","useFocusVisibleRef","useImperativeHandle","current","cls","States","Invalid","e","preventDefault","undefined","target","Valid","COLORS","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {SystemIcons} from '../icons';\nimport {COLORS} from '../styles';\nimport {Size, States, Testable} from '../types';\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\n\nexport type TextFieldProps =\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id'  | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\n  & {\n  id?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(({\n                                      id,\n                                      disabled,\n                                      readOnly,\n                                      onChange,\n                                      value,\n                                      validationMessage,\n                                      type,\n                                      autoComplete,\n                                      placeholder,\n                                      required,\n                                      pattern,\n                                      maxLength,\n                                      withoutBorder,\n                                      state,\n                                      size,\n                                      margin,\n                                      note,\n                                      className,\n                                      dataTestId,\n                                      ...rest\n                                    }: TextFieldProps, ref) => {\n  const elementRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          data-testId={dataTestId}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={cls}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={disabled ? undefined : placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage && state !== States.Valid}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n          {...rest}\n        />\n        <TooltipOverflow value={value} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end' position='bottom'>\n          {value}\n        </TooltipOverflow>\n\n        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.correct_400}/> :\n              <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>}\n            <span>{validationMessage}</span>\n          </ValidationMessage>\n        )}\n        {note && !disabled && (\n          <NoteMessage className={size}>\n            {note.icon}\n            <span>{note.message}</span>\n          </NoteMessage>\n        )}\n      </InputWrapper>\n    </>\n  );\n});\n\nexport default TextField;\n"],"mappings":"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"}

package/dist/InputFields/TextField.d.ts

@@ -1,6 +1,25 @@
 import * as React from 'react';
 import { Size, States, Testable } from '../types';
 import { TextFieldNote } from './types';
+export type TextFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id' | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'> & {
+    id?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    onChange?: (text: string) => void;
+    value?: string;
+    validationMessage?: string;
+    type?: string;
+    state?: States.Invalid | States.Valid;
+    autoComplete?: string;
+    placeholder?: string;
+    required?: boolean;
+    pattern?: string;
+    maxLength?: number;
+    withoutBorder?: boolean;
+    size?: Size.Small | Size.Medium;
+    margin?: string;
+    note?: TextFieldNote;
+};
 declare const TextField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "pattern" | "type" | "id" | "onChange" | "size" | "disabled" | "value" | "autoComplete" | "maxLength" | "readOnly"> & {
     id?: string | undefined;
     disabled?: boolean | undefined;
@@ -19,5 +38,5 @@ declare const TextField: React.ForwardRefExoticComponent<Testable & Omit<React.I
     size?: Size.Small | Size.Medium | undefined;
     margin?: string | undefined;
     note?: TextFieldNote | undefined;
-} & React.RefAttributes<unknown>>;
+} & React.RefAttributes<HTMLInputElement>>;
 export default TextField;

package/dist/InputFields/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":["React","SystemIcons","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TooltipOverflow","TextField","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","dataTestId","rest","elementRef","useImperativeHandle","current","cls","Invalid","e","preventDefault","undefined","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {SystemIcons} from '../icons';\nimport {COLORS} from '../styles';\nimport {Size, States, Testable} from '../types';\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\n\ntype TextFieldProps =\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id'  | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\n  & {\n  id?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nconst TextField = React.forwardRef(({\n                                      id,\n                                      disabled,\n                                      readOnly,\n                                      onChange,\n                                      value,\n                                      validationMessage,\n                                      type,\n                                      autoComplete,\n                                      placeholder,\n                                      required,\n                                      pattern,\n                                      maxLength,\n                                      withoutBorder,\n                                      state,\n                                      size,\n                                      margin,\n                                      note,\n                                      className,\n                                      dataTestId,\n                                      ...rest\n                                    }: TextFieldProps, ref) => {\n  const elementRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          data-testId={dataTestId}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={cls}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={disabled ? undefined : placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage && state !== States.Valid}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n          {...rest}\n        />\n        <TooltipOverflow value={value} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end' position='bottom'>\n          {value}\n        </TooltipOverflow>\n\n        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.correct_400}/> :\n              <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>}\n            <span>{validationMessage}</span>\n          </ValidationMessage>\n        )}\n        {note && !disabled && (\n          <NoteMessage className={size}>\n            {note.icon}\n            <span>{note.message}</span>\n          </NoteMessage>\n        )}\n      </InputWrapper>\n    </>\n  );\n});\n\nexport default TextField;\n"],"mappings":"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"}
+{"version":3,"file":"TextField.js","names":["React","SystemIcons","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TooltipOverflow","TextField","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","dataTestId","rest","elementRef","useImperativeHandle","current","cls","Invalid","e","preventDefault","undefined","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {SystemIcons} from '../icons';\nimport {COLORS} from '../styles';\nimport {Size, States, Testable} from '../types';\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\n\nexport type TextFieldProps =\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id'  | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\n  & {\n  id?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(({\n                                      id,\n                                      disabled,\n                                      readOnly,\n                                      onChange,\n                                      value,\n                                      validationMessage,\n                                      type,\n                                      autoComplete,\n                                      placeholder,\n                                      required,\n                                      pattern,\n                                      maxLength,\n                                      withoutBorder,\n                                      state,\n                                      size,\n                                      margin,\n                                      note,\n                                      className,\n                                      dataTestId,\n                                      ...rest\n                                    }: TextFieldProps, ref) => {\n  const elementRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          data-testId={dataTestId}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={cls}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={disabled ? undefined : placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage && state !== States.Valid}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n          {...rest}\n        />\n        <TooltipOverflow value={value} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end' position='bottom'>\n          {value}\n        </TooltipOverflow>\n\n        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.correct_400}/> :\n              <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>}\n            <span>{validationMessage}</span>\n          </ValidationMessage>\n        )}\n        {note && !disabled && (\n          <NoteMessage className={size}>\n            {note.icon}\n            <span>{note.message}</span>\n          </NoteMessage>\n        )}\n      </InputWrapper>\n    </>\n  );\n});\n\nexport default TextField;\n"],"mappings":"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"}

package/dist/InputFields/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/InputFields/index.ts"],"sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\nimport NumberField from './NumberField';\n\nexport * from './styling';\n\nexport {\n  TextField,\n  PasswordField,\n  Checkbox,\n  RadioButton,\n  SearchBar,\n  InputLabel,\n  DatepickerField,\n  Textarea,\n  QuickSearch,\n  NumberField\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/InputFields/index.ts"],"sourcesContent":["import TextField, { TextFieldProps } from './TextField';\nimport PasswordField, { PasswordFieldProps } from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton, { RadioButtonProps } from './RadioButton';\nimport SearchBar, { SearchBarProps } from './SearchBar';\nimport InputLabel, { LabelProps } from './Label';\nimport DatepickerField, { DatepickerFieldProps } from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch, { QuickSearchProps } from './QuickSearch';\nimport NumberField, { NumberFieldProps } from './NumberField';\nimport { TextareaProps, CheckboxProps } from './types';\n\nexport * from './styling';\n\nexport { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };\n\nexport type { TextFieldProps, CheckboxProps, TextareaProps, DatepickerFieldProps, LabelProps, NumberFieldProps, PasswordFieldProps, QuickSearchProps, RadioButtonProps, SearchBarProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/dist/InputFields/index.d.ts

@@ -1,12 +1,14 @@
-import TextField from './TextField';
-import PasswordField from './PasswordField';
+import TextField, { TextFieldProps } from './TextField';
+import PasswordField, { PasswordFieldProps } from './PasswordField';
 import Checkbox from './Checkbox';
-import RadioButton from './RadioButton';
-import SearchBar from './SearchBar';
-import InputLabel from './Label';
-import DatepickerField from './DatepickerField';
+import RadioButton, { RadioButtonProps } from './RadioButton';
+import SearchBar, { SearchBarProps } from './SearchBar';
+import InputLabel, { LabelProps } from './Label';
+import DatepickerField, { DatepickerFieldProps } from './DatepickerField';
 import Textarea from './Textarea';
-import QuickSearch from './QuickSearch';
-import NumberField from './NumberField';
+import QuickSearch, { QuickSearchProps } from './QuickSearch';
+import NumberField, { NumberFieldProps } from './NumberField';
+import { TextareaProps, CheckboxProps } from './types';
 export * from './styling';
 export { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };
+export type { TextFieldProps, CheckboxProps, TextareaProps, DatepickerFieldProps, LabelProps, NumberFieldProps, PasswordFieldProps, QuickSearchProps, RadioButtonProps, SearchBarProps };

package/dist/InputFields/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["TextField","PasswordField","Checkbox","RadioButton","SearchBar","InputLabel","DatepickerField","Textarea","QuickSearch","NumberField"],"sources":["../../src/InputFields/index.ts"],"sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\nimport NumberField from './NumberField';\n\nexport * from './styling';\n\nexport {\n  TextField,\n  PasswordField,\n  Checkbox,\n  RadioButton,\n  SearchBar,\n  InputLabel,\n  DatepickerField,\n  Textarea,\n  QuickSearch,\n  NumberField\n};\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,aAAa;AACnC,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,UAAU,MAAM,SAAS;AAChC,OAAOC,eAAe,MAAM,mBAAmB;AAC/C,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,WAAW,MAAM,eAAe;AAEvC,cAAc,WAAW;AAEzB,SACET,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,WAAW,EACXC,SAAS,EACTC,UAAU,EACVC,eAAe,EACfC,QAAQ,EACRC,WAAW,EACXC,WAAW"}
+{"version":3,"file":"index.js","names":["TextField","PasswordField","Checkbox","RadioButton","SearchBar","InputLabel","DatepickerField","Textarea","QuickSearch","NumberField"],"sources":["../../src/InputFields/index.ts"],"sourcesContent":["import TextField, { TextFieldProps } from './TextField';\nimport PasswordField, { PasswordFieldProps } from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton, { RadioButtonProps } from './RadioButton';\nimport SearchBar, { SearchBarProps } from './SearchBar';\nimport InputLabel, { LabelProps } from './Label';\nimport DatepickerField, { DatepickerFieldProps } from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch, { QuickSearchProps } from './QuickSearch';\nimport NumberField, { NumberFieldProps } from './NumberField';\nimport { TextareaProps, CheckboxProps } from './types';\n\nexport * from './styling';\n\nexport { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };\n\nexport type { TextFieldProps, CheckboxProps, TextareaProps, DatepickerFieldProps, LabelProps, NumberFieldProps, PasswordFieldProps, QuickSearchProps, RadioButtonProps, SearchBarProps };\n"],"mappings":"AAAA,OAAOA,SAAS,MAA0B,aAAa;AACvD,OAAOC,aAAa,MAA8B,iBAAiB;AACnE,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,WAAW,MAA4B,eAAe;AAC7D,OAAOC,SAAS,MAA0B,aAAa;AACvD,OAAOC,UAAU,MAAsB,SAAS;AAChD,OAAOC,eAAe,MAAgC,mBAAmB;AACzE,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,WAAW,MAA4B,eAAe;AAC7D,OAAOC,WAAW,MAA4B,eAAe;AAG7D,cAAc,WAAW;AAEzB,SAAST,SAAS,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,SAAS,EAAEC,UAAU,EAAEC,eAAe,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,WAAW"}

package/dist/InputFields/types.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"types.cjs","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import {Size, States, Testable} from '../types';\nimport React from 'react';\n\nexport type TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nexport type TextareaProps =\n  Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>,  'onChange'>\n  & {\n  id: string;\n  state?: States.Invalid | States.Valid;\n  onChange?: (text: string) => void;\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  autoHeight?: boolean;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nexport type TextFieldNote = {\n  message: string;\n  icon: React.ReactNode;\n};\n\nexport interface CheckboxProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readOnly?: boolean;\n  tabIndexVal?: number;\n  className?: string;\n};\n"],"mappings":";;;;;AAuDC"}
+{"version":3,"file":"types.cjs","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import {Size, States, Testable} from '../types';\nimport React from 'react';\n\nexport type TextareaProps =\n  Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>,  'onChange'>\n  & {\n  id: string;\n  state?: States.Invalid | States.Valid;\n  onChange?: (text: string) => void;\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  autoHeight?: boolean;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nexport type TextFieldNote = {\n  message: string;\n  icon: React.ReactNode;\n};\n\nexport interface CheckboxProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readOnly?: boolean;\n  tabIndexVal?: number;\n  className?: string;\n};\n"],"mappings":";;;;;AAmCC"}

package/dist/InputFields/types.d.ts

@@ -1,24 +1,5 @@
 import { Size, States, Testable } from '../types';
 import React from 'react';
-export type TextFieldProps = {
-    id: string;
-    disabled?: boolean;
-    readOnly?: boolean;
-    onChange?: (text: string) => void;
-    value?: string;
-    validationMessage?: string;
-    type?: string;
-    state?: States.Invalid | States.Valid;
-    autoComplete?: string;
-    placeholder?: string;
-    required?: boolean;
-    pattern?: string;
-    maxLength?: number;
-    withoutBorder?: boolean;
-    size?: Size.Small | Size.Medium;
-    margin?: string;
-    note?: TextFieldNote;
-};
 export type TextareaProps = Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> & {
     id: string;
     state?: States.Invalid | States.Valid;

package/dist/InputFields/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import {Size, States, Testable} from '../types';\nimport React from 'react';\n\nexport type TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nexport type TextareaProps =\n  Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>,  'onChange'>\n  & {\n  id: string;\n  state?: States.Invalid | States.Valid;\n  onChange?: (text: string) => void;\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  autoHeight?: boolean;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nexport type TextFieldNote = {\n  message: string;\n  icon: React.ReactNode;\n};\n\nexport interface CheckboxProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readOnly?: boolean;\n  tabIndexVal?: number;\n  className?: string;\n};\n"],"mappings":"AAuDC;AAAC"}
+{"version":3,"file":"types.js","names":[],"sources":["../../src/InputFields/types.ts"],"sourcesContent":["import {Size, States, Testable} from '../types';\nimport React from 'react';\n\nexport type TextareaProps =\n  Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>,  'onChange'>\n  & {\n  id: string;\n  state?: States.Invalid | States.Valid;\n  onChange?: (text: string) => void;\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  autoHeight?: boolean;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nexport type TextFieldNote = {\n  message: string;\n  icon: React.ReactNode;\n};\n\nexport interface CheckboxProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onKeyDown' | 'onMouseDown' | 'tabIndex'>{\n  id?: string;\n  selected: boolean;\n  select?: (selected: boolean) => void;\n  label?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n  readOnly?: boolean;\n  tabIndexVal?: number;\n  className?: string;\n};\n"],"mappings":"AAmCC;AAAC"}

package/dist/LoadingIndicator/LoadingIndicator.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Size } from '../types';
 type LoadingIndicatorProps = {
     id?: string;

package/dist/MiniProductCard/MiniProductCard.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Product } from '../types';
 type CardProps = {
     product: Product;

package/dist/Modals/ModalContent.cjs

@@ -111,7 +111,7 @@ var ModalContent = function ModalContent(props) {
                   _action(e);
                 }
               },
-              children: [getLeftActionIconElement(), _text]
+              children: [_text, getLeftActionIconElement()]
             }))
           });
         }

package/dist/Modals/ModalContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.cjs","names":["HeaderText","styled","div","HeaderTitle","ComponentMStyling","ComponentTextStyle","Bold","COLORS","black","HeaderNote","ComponentXXSStyling","Regular","neutral_600","HeaderActions","Header","TooltipContainer","Content","scrollBarStyling","Size","Small","FooterLeftContainer","FooterLeftNote","FooterLeftLink","ComponentSStyling","primary_500","FooterRightContainer","Footer","Wrapper","ComponentLStyling","ComponentXSStyling","ComponentXLStyling","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","icon","rest","id","getLeftActionIconElement","leftFooterAction","React","cloneElement","size","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","onBack","title","note","children","footerActions","item","a","key","zIndex"],"sources":["../../src/Modals/ModalContent.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {ButtonAction, IconButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling, ComponentSStyling,\n  ComponentTextStyle, ComponentXLStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling,\n  scrollBarStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {HyperLink} from '../HyperLink';\n\nconst HeaderText = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  padding: 12px 0 12px 12px;\n  gap: 4px;\n  \n  &:not(:first-child) {\n    padding-left: 0 !important;\n  }\n  \n`;\nconst HeaderTitle = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\nconst HeaderNote = styled.div`\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderActions = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst Header = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ${TooltipContainer} {\n    height: max-content;\n  }\n`;\n\nconst Content = styled.div`\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst FooterLeftContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n`;\n\nconst FooterRightContainer = styled.div`\n  gap: 8px;\n  margin-left: auto;\n`\n\nconst Footer = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: max-content;\n\n  max-height: calc(100vh - 32px);\n  max-width: calc(100vw - 32px);\n\n  &.medium {\n    max-height: calc(100vh - 64px);\n    max-width: calc(100vw - 64px);\n\n    ${Header} {\n      padding: 12px 12px 4px 12px;\n\n      ${HeaderText} {\n        padding: 12px 0 12px 12px;\n        gap: 4px;\n\n        ${HeaderTitle} {\n          ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n        }\n\n        ${HeaderNote} {\n          ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 16px 0 24px;\n    }\n\n    ${Footer} {\n      padding: 12px 24px 20px 24px;\n\n      ${FooterLeftNote} {\n        ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n        gap: 6px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 6px;\n        }\n\n        ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 8px;\n      }\n    }\n  }\n\n  &.large {\n    max-height: calc(100vh - 112px);\n    max-width: calc(100vw - 112px);\n\n    ${Header} {\n      padding: 20px 20px 4px 20px;\n\n      ${HeaderText} {\n        padding: 10px 0 10px 12px;\n        gap: 8px;\n\n        ${HeaderTitle} {\n          ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n        }\n\n        ${HeaderNote} {\n          ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 24px 0 32px;\n    }\n\n    ${Footer} {\n      padding: 16px 32px 32px 32px;\n\n      ${FooterLeftNote} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n        gap: 8px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 8px;\n        }\n\n        ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 16px;\n      }\n    }\n  }\n`;\n\n\ninterface ModalContentProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  isModalOpen: boolean;\n  closeAction: () => void;\n  onBack?: () => void;\n  title: string;\n  note?: string;\n  headerActions?: IconButtonAction[];\n  footerActions?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  zIndex?: number;\n  children?: React.ReactNode;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n  const tooltip = () =>\n    !!props.tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n                    label={props.tooltip}>\n      <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n      }}>\n        <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n  const headerActions = () => props.headerActions?.map((action, index) => {\n      const {icon, ...rest} = action;\n      return <IconButton key={action.id || index}\n                         {...rest}>\n        {icon}\n      </IconButton>\n    }\n  );\n\n  const getLeftActionIconElement = () =>\n    !!props.leftFooterAction?.icon &&\n    React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n      size:\n        props.size === Size.Small\n          ? '20px'\n          : props.size === Size.Large\n            ? '28px'\n            : '24px'\n    });\n\n  const leftFooterAction = () => {\n    if (!props.leftFooterAction) return null;\n\n    switch (props.leftFooterAction.actionType) {\n      case 'button': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n        return (\n          <Button{...rest}\n                 size={props.size}\n                 onClick={action}\n                 variant={variant ?? 'secondary'}>\n            {text}\n          </Button>\n        );\n      }\n      case 'hyperlink': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n        return (\n          <FooterLeftLink>\n            <HyperLink {...rest}\n                       variant={variant ?? 'default'}\n                       onClick={(e) => {\n                         if (action) {\n                           e.preventDefault();\n                           action(e);\n                         }\n                       }}>\n              {getLeftActionIconElement()}\n              {text}\n            </HyperLink>\n          </FooterLeftLink>\n        );\n\n      }\n      case 'note': {\n        const {text} = props.leftFooterAction;\n        return (\n          <FooterLeftNote>\n            {getLeftActionIconElement()}\n            <span>{text}</span>\n          </FooterLeftNote>\n        );\n      }\n    }\n  };\n\n\n  return (\n    <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n      <Wrapper className={props.size ?? Size.Medium}>\n        <Header>\n          {\n            props.onBack &&\n            <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n              <SystemIcons.ArrowLineLeft/>\n            </IconButton>\n          }\n          <HeaderText>\n            <HeaderTitle>{props.title}</HeaderTitle>\n            {!!props.note && <HeaderNote>{props.note}</HeaderNote>}\n          </HeaderText>\n          <HeaderActions>\n            {tooltip()}\n            {headerActions()}\n            <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'} variant=\"secondary\" shape=\"circular\"\n                        action={props.closeAction}>\n              <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n            </IconButton>\n          </HeaderActions>\n        </Header>\n        <Content>\n          {props.children}\n        </Content>\n        <Footer>\n          <FooterLeftContainer>\n            {leftFooterAction()}\n          </FooterLeftContainer>\n          <FooterRightContainer>\n            {props.footerActions?.map((item, index) => {\n                const {action, text, ...rest} = item;\n                return <Button key={rest.id || index}\n                               {...rest}\n                               onClick={action}\n                               size={props.size}\n                               onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n                  {text}\n                </Button>\n              }\n            )}\n          </FooterRightContainer>\n        </Footer>\n      </Wrapper>\n    </ModalContainer>\n  );\n};\n\nexport default ModalContent;\n"],"mappings":"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"}
+{"version":3,"file":"ModalContent.cjs","names":["HeaderText","styled","div","HeaderTitle","ComponentMStyling","ComponentTextStyle","Bold","COLORS","black","HeaderNote","ComponentXXSStyling","Regular","neutral_600","HeaderActions","Header","TooltipContainer","Content","scrollBarStyling","Size","Small","FooterLeftContainer","FooterLeftNote","FooterLeftLink","ComponentSStyling","primary_500","FooterRightContainer","Footer","Wrapper","ComponentLStyling","ComponentXSStyling","ComponentXLStyling","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","icon","rest","id","getLeftActionIconElement","leftFooterAction","React","cloneElement","size","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","onBack","title","note","children","footerActions","item","a","key","zIndex"],"sources":["../../src/Modals/ModalContent.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {ButtonAction, IconButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling, ComponentSStyling,\n  ComponentTextStyle, ComponentXLStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling,\n  scrollBarStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {HyperLink} from '../HyperLink';\n\nconst HeaderText = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  padding: 12px 0 12px 12px;\n  gap: 4px;\n  \n  &:not(:first-child) {\n    padding-left: 0 !important;\n  }\n  \n`;\nconst HeaderTitle = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\nconst HeaderNote = styled.div`\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderActions = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst Header = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ${TooltipContainer} {\n    height: max-content;\n  }\n`;\n\nconst Content = styled.div`\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst FooterLeftContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n`;\n\nconst FooterRightContainer = styled.div`\n  gap: 8px;\n  margin-left: auto;\n`\n\nconst Footer = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: max-content;\n\n  max-height: calc(100vh - 32px);\n  max-width: calc(100vw - 32px);\n\n  &.medium {\n    max-height: calc(100vh - 64px);\n    max-width: calc(100vw - 64px);\n\n    ${Header} {\n      padding: 12px 12px 4px 12px;\n\n      ${HeaderText} {\n        padding: 12px 0 12px 12px;\n        gap: 4px;\n\n        ${HeaderTitle} {\n          ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n        }\n\n        ${HeaderNote} {\n          ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 16px 0 24px;\n    }\n\n    ${Footer} {\n      padding: 12px 24px 20px 24px;\n\n      ${FooterLeftNote} {\n        ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n        gap: 6px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 6px;\n        }\n\n        ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 8px;\n      }\n    }\n  }\n\n  &.large {\n    max-height: calc(100vh - 112px);\n    max-width: calc(100vw - 112px);\n\n    ${Header} {\n      padding: 20px 20px 4px 20px;\n\n      ${HeaderText} {\n        padding: 10px 0 10px 12px;\n        gap: 8px;\n\n        ${HeaderTitle} {\n          ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n        }\n\n        ${HeaderNote} {\n          ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 24px 0 32px;\n    }\n\n    ${Footer} {\n      padding: 16px 32px 32px 32px;\n\n      ${FooterLeftNote} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n        gap: 8px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 8px;\n        }\n\n        ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 16px;\n      }\n    }\n  }\n`;\n\n\ninterface ModalContentProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  isModalOpen: boolean;\n  closeAction: () => void;\n  onBack?: () => void;\n  title: string;\n  note?: string;\n  headerActions?: IconButtonAction[];\n  footerActions?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  zIndex?: number;\n  children?: React.ReactNode;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n  const tooltip = () =>\n    !!props.tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n                    label={props.tooltip}>\n      <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n      }}>\n        <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n  const headerActions = () => props.headerActions?.map((action, index) => {\n      const {icon, ...rest} = action;\n      return <IconButton key={action.id || index}\n                         {...rest}>\n        {icon}\n      </IconButton>\n    }\n  );\n\n  const getLeftActionIconElement = () =>\n    !!props.leftFooterAction?.icon &&\n    React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n      size:\n        props.size === Size.Small\n          ? '20px'\n          : props.size === Size.Large\n            ? '28px'\n            : '24px'\n    });\n\n  const leftFooterAction = () => {\n    if (!props.leftFooterAction) return null;\n\n    switch (props.leftFooterAction.actionType) {\n      case 'button': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n        return (\n          <Button{...rest}\n                 size={props.size}\n                 onClick={action}\n                 variant={variant ?? 'secondary'}>\n            {text}\n          </Button>\n        );\n      }\n      case 'hyperlink': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n        return (\n          <FooterLeftLink>\n            <HyperLink {...rest}\n                       variant={variant ?? 'default'}\n                       onClick={(e) => {\n                         if (action) {\n                           e.preventDefault();\n                           action(e);\n                         }\n                       }}>\n              {text}\n              {getLeftActionIconElement()}\n            </HyperLink>\n          </FooterLeftLink>\n        );\n\n      }\n      case 'note': {\n        const {text} = props.leftFooterAction;\n        return (\n          <FooterLeftNote>\n            {getLeftActionIconElement()}\n            <span>{text}</span>\n          </FooterLeftNote>\n        );\n      }\n    }\n  };\n\n\n  return (\n    <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n      <Wrapper className={props.size ?? Size.Medium}>\n        <Header>\n          {\n            props.onBack &&\n            <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n              <SystemIcons.ArrowLineLeft/>\n            </IconButton>\n          }\n          <HeaderText>\n            <HeaderTitle>{props.title}</HeaderTitle>\n            {!!props.note && <HeaderNote>{props.note}</HeaderNote>}\n          </HeaderText>\n          <HeaderActions>\n            {tooltip()}\n            {headerActions()}\n            <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'} variant=\"secondary\" shape=\"circular\"\n                        action={props.closeAction}>\n              <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n            </IconButton>\n          </HeaderActions>\n        </Header>\n        <Content>\n          {props.children}\n        </Content>\n        <Footer>\n          <FooterLeftContainer>\n            {leftFooterAction()}\n          </FooterLeftContainer>\n          <FooterRightContainer>\n            {props.footerActions?.map((item, index) => {\n                const {action, text, ...rest} = item;\n                return <Button key={rest.id || index}\n                               {...rest}\n                               onClick={action}\n                               size={props.size}\n                               onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n                  {text}\n                </Button>\n              }\n            )}\n          </FooterRightContainer>\n        </Footer>\n      </Wrapper>\n    </ModalContainer>\n  );\n};\n\nexport default ModalContent;\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AAEA;AACA;AACA;AASA;AACA;AACA;AACA;AAAuC;AAAA;EAAA;EAAA;EAAA;AAAA;AAAA;AAAA;AAEvC,IAAMA,UAAU,GAAGC,yBAAM,CAACC,GAAG,8RAa5B;AACD,IAAMC,WAAW,GAAGF,yBAAM,CAACC,GAAG,gGAC1B,IAAAE,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACC,KAAK,CAAC,CAC3D;AACD,IAAMC,UAAU,GAAGR,yBAAM,CAACC,GAAG,gGACzB,IAAAQ,2BAAmB,EAACL,0BAAkB,CAACM,OAAO,EAAEJ,cAAM,CAACK,WAAW,CAAC,CACtE;AAED,IAAMC,aAAa,GAAGZ,yBAAM,CAACC,GAAG,iIAG/B;AAED,IAAMY,MAAM,GAAGb,yBAAM,CAACC,GAAG,8LAKrBa,0BAAgB,CAGnB;AAED,IAAMC,OAAO,GAAGf,yBAAM,CAACC,GAAG,qKAKtB,IAAAe,wBAAgB,EAACC,WAAI,CAACC,KAAK,CAAC,CAC/B;AAED,IAAMC,mBAAmB,GAAGnB,yBAAM,CAACC,GAAG,iIAGrC;AAED,IAAMmB,cAAc,GAAGpB,yBAAM,CAACC,GAAG,iLAM7B,IAAAQ,2BAAmB,EAACL,0BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACK,WAAW,CAAC,CACnE;AAED,IAAMU,cAAc,GAAGrB,yBAAM,CAACC,GAAG,mMAC7B,IAAAqB,yBAAiB,EAAClB,0BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACiB,WAAW,CAAC,CAOjE;AAED,IAAMC,oBAAoB,GAAGxB,yBAAM,CAACC,GAAG,4HAGtC;AAED,IAAMwB,MAAM,GAAGzB,yBAAM,CAACC,GAAG,yJAIxB;AAGD,IAAMyB,OAAO,GAAG1B,yBAAM,CAACC,GAAG,67CAYpBY,MAAM,EAGJd,UAAU,EAIRG,WAAW,EACT,IAAAyB,yBAAiB,EAACvB,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,EAGlDG,UAAU,EACR,IAAAoB,0BAAkB,EAACxB,0BAAkB,CAACM,OAAO,EAAE,IAAI,CAAC,EAK1DK,OAAO,EAIPU,MAAM,EAGJL,cAAc,EACZ,IAAAQ,0BAAkB,EAACxB,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,EAInDgB,cAAc,EAKZ,IAAAlB,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,EAGlDmB,oBAAoB,EAUtBX,MAAM,EAGJd,UAAU,EAIRG,WAAW,EACT,IAAA2B,0BAAkB,EAACzB,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,EAGnDG,UAAU,EACR,IAAAc,yBAAiB,EAAClB,0BAAkB,CAACM,OAAO,EAAE,IAAI,CAAC,EAKzDK,OAAO,EAIPU,MAAM,EAGJL,cAAc,EACZ,IAAAE,yBAAiB,EAAClB,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,EAIlDgB,cAAc,EAKZ,IAAAM,yBAAiB,EAACvB,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,EAGlDmB,oBAAoB,CAK3B;AAkBD,IAAMM,YAAyC,GAAG,SAA5CA,YAAyC,CAAIC,KAAK,EAAK;EAAA;EAE3D,IAAMC,OAAO,GAAG,SAAVA,OAAO;IAAA,OACX,CAAC,CAACD,KAAK,CAACC,OAAO,iBACf,qBAAC,wBAAc;MAAC,KAAK,EAAC,IAAI;MAAC,IAAI,EAAEf,WAAI,CAACgB,MAAO;MAAC,KAAK,EAAC,QAAQ;MAAC,QAAQ,EAAC,QAAQ;MAAC,SAAS,EAAE,KAAM;MAChF,KAAK,EAAEF,KAAK,CAACC,OAAQ;MAAA,uBACnC,qBAAC,kBAAU;QAAC,OAAO,EAAC,WAAW;QAAC,KAAK,EAAC,UAAU;QAAC,KAAK,EAAE;UAACE,MAAM,EAAE;QAAM,CAAE;QAAC,MAAM,EAAE,kBAAM,CACxF,CAAE;QAAA,uBACA,qBAAC,kBAAW,CAAC,IAAI;UAAC,IAAI,EAAC,MAAM;UAAC,KAAK,EAAE5B,cAAM,CAACK;QAAY;MAAE;IAC/C,EACE;EAAA;EAEnB,IAAMwB,aAAa,GAAG,SAAhBA,aAAa;IAAA;IAAA,+BAASJ,KAAK,CAACI,aAAa,yDAAnB,qBAAqBC,GAAG,CAAC,UAACC,MAAM,EAAEC,KAAK,EAAK;MACpE,IAAOC,IAAI,GAAaF,MAAM,CAAvBE,IAAI;QAAKC,IAAI,0CAAIH,MAAM;MAC9B,oBAAO,qBAAC,kBAAU,kCACKG,IAAI;QAAA,UACxBD;MAAI,IAFiBF,MAAM,CAACI,EAAE,IAAIH,KAAK,CAG7B;IACf,CAAC,CACF;EAAA;EAED,IAAMI,wBAAwB,GAAG,SAA3BA,wBAAwB;IAAA;IAAA,OAC5B,CAAC,2BAACX,KAAK,CAACY,gBAAgB,kDAAtB,sBAAwBJ,IAAI,kBAC9BK,cAAK,CAACC,YAAY,2BAACd,KAAK,CAACY,gBAAgB,2DAAtB,uBAAwBJ,IAAI,EAAwB;MACrEO,IAAI,EACFf,KAAK,CAACe,IAAI,KAAK7B,WAAI,CAACC,KAAK,GACrB,MAAM,GACNa,KAAK,CAACe,IAAI,KAAK7B,WAAI,CAAC8B,KAAK,GACvB,MAAM,GACN;IACV,CAAC,CAAC;EAAA;EAEJ,IAAMJ,gBAAgB,GAAG,SAAnBA,gBAAgB,GAAS;IAC7B,IAAI,CAACZ,KAAK,CAACY,gBAAgB,EAAE,OAAO,IAAI;IAExC,QAAQZ,KAAK,CAACY,gBAAgB,CAACK,UAAU;MACvC,KAAK,QAAQ;QAAE;UACb,WAAyCjB,KAAK,CAACY,gBAAgB;YAAxDM,IAAI,QAAJA,IAAI;YAAEC,OAAO,QAAPA,OAAO;YAAEb,MAAM,QAANA,MAAM;YAAKG,IAAI;UACrC,oBACE,qBAAC,cAAM,kCAAIA,IAAI;YACR,IAAI,EAAET,KAAK,CAACe,IAAK;YACjB,OAAO,EAAET,MAAO;YAChB,OAAO,EAAEa,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAI,WAAY;YAAA,UACpCD;UAAI,GACE;QAEb;MACA,KAAK,WAAW;QAAE;UAChB,YAAyClB,KAAK,CAACY,gBAAgB;YAAxDM,KAAI,SAAJA,IAAI;YAAEC,QAAO,SAAPA,OAAO;YAAEb,OAAM,SAANA,MAAM;YAAKG,KAAI;UACrC,oBACE,qBAAC,cAAc;YAAA,uBACb,sBAAC,oBAAS,kCAAKA,KAAI;cACR,OAAO,EAAEU,QAAO,aAAPA,QAAO,cAAPA,QAAO,GAAI,SAAU;cAC9B,OAAO,EAAE,iBAACC,CAAC,EAAK;gBACd,IAAId,OAAM,EAAE;kBACVc,CAAC,CAACC,cAAc,EAAE;kBAClBf,OAAM,CAACc,CAAC,CAAC;gBACX;cACF,CAAE;cAAA,WACVF,KAAI,EACJP,wBAAwB,EAAE;YAAA;UACjB,EACG;QAGrB;MACA,KAAK,MAAM;QAAE;UACX,IAAOO,MAAI,GAAIlB,KAAK,CAACY,gBAAgB,CAA9BM,IAAI;UACX,oBACE,sBAAC,cAAc;YAAA,WACZP,wBAAwB,EAAE,eAC3B;cAAA,UAAOO;YAAI,EAAQ;UAAA,EACJ;QAErB;IAAC;EAEL,CAAC;EAGD,oBACE,qBAAC,qBAAc;IAAC,SAAS,EAAElB,KAAK,CAACsB,WAAY;IAAC,UAAU,EAAEtB,KAAK,CAACuB,WAAY;IAAA,uBAC1E,sBAAC,OAAO;MAAC,SAAS,iBAAEvB,KAAK,CAACe,IAAI,qDAAI7B,WAAI,CAACsC,MAAO;MAAA,wBAC5C,sBAAC,MAAM;QAAA,WAEHxB,KAAK,CAACyB,MAAM,iBACZ,qBAAC,kBAAU;UAAC,OAAO,EAAC,WAAW;UAAC,KAAK,EAAC,UAAU;UAAC,MAAM,EAAEzB,KAAK,CAACyB,MAAO;UAAA,uBACpE,qBAAC,kBAAW,CAAC,aAAa;QAAE,EACjB,eAEf,sBAAC,UAAU;UAAA,wBACT,qBAAC,WAAW;YAAA,UAAEzB,KAAK,CAAC0B;UAAK,EAAe,EACvC,CAAC,CAAC1B,KAAK,CAAC2B,IAAI,iBAAI,qBAAC,UAAU;YAAA,UAAE3B,KAAK,CAAC2B;UAAI,EAAc;QAAA,EAC3C,eACb,sBAAC,aAAa;UAAA,WACX1B,OAAO,EAAE,EACTG,aAAa,EAAE,eAChB,qBAAC,kBAAU;YAAC,UAAU,EAAE,4BAA6B;YAAC,EAAE,EAAE,4BAA6B;YAAC,OAAO,EAAC,WAAW;YAAC,KAAK,EAAC,UAAU;YAChH,MAAM,EAAEJ,KAAK,CAACuB,WAAY;YAAA,uBACpC,qBAAC,kBAAW,CAAC,KAAK;cAAC,IAAI,EAAC,MAAM;cAAC,KAAK,EAAEhD,cAAM,CAACK;YAAY;UAAE,EAChD;QAAA,EACC;MAAA,EACT,eACT,qBAAC,OAAO;QAAA,UACLoB,KAAK,CAAC4B;MAAQ,EACP,eACV,sBAAC,MAAM;QAAA,wBACL,qBAAC,mBAAmB;UAAA,UACjBhB,gBAAgB;QAAE,EACC,eACtB,qBAAC,oBAAoB;UAAA,kCAClBZ,KAAK,CAAC6B,aAAa,yDAAnB,qBAAqBxB,GAAG,CAAC,UAACyB,IAAI,EAAEvB,KAAK,EAAK;YACvC,IAAOD,MAAM,GAAmBwB,IAAI,CAA7BxB,MAAM;cAAEY,IAAI,GAAaY,IAAI,CAArBZ,IAAI;cAAKT,IAAI,0CAAIqB,IAAI;YACpC,oBAAO,qBAAC,cAAM,kCACKrB,IAAI;cACR,OAAO,EAAEH,MAAO;cAChB,IAAI,EAAEN,KAAK,CAACe,IAAK;cACjB,SAAS,EAAE,mBAAAgB,CAAC;gBAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAK1B,MAAM,CAAEyB,CAAC,CAAC;cAAA,CAAC;cAAA,UAC/Eb;YAAI,IALaT,IAAI,CAACC,EAAE,IAAIH,KAAK,CAM3B;UACX,CAAC;QACF,EACoB;MAAA,EAChB;IAAA;EACD,EACK;AAErB,CAAC;AAAC;EA3IAe,WAAW;EACXC,WAAW;EACXE,MAAM;EACNC,KAAK;EACLC,IAAI;EACJvB,aAAa;EACbyB,aAAa;EAEb5B,OAAO;EACPgC,MAAM;EACNL,QAAQ;AAAA;AAAA,eAmIK7B,YAAY;AAAA"}

package/dist/Modals/ModalContent.js

@@ -105,7 +105,7 @@ var ModalContent = function ModalContent(props) {
                   _action(e);
                 }
               },
-              children: [getLeftActionIconElement(), _text]
+              children: [_text, getLeftActionIconElement()]
             }))
           });
         }

package/dist/Modals/ModalContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContent.js","names":["React","Size","ModalContainer","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXLStyling","ComponentXSStyling","ComponentXXSStyling","scrollBarStyling","TooltipContainer","TooltipWrapper","Button","IconButton","SystemIcons","HyperLink","HeaderText","div","HeaderTitle","Bold","black","HeaderNote","Regular","neutral_600","HeaderActions","Header","Content","Small","FooterLeftContainer","FooterLeftNote","FooterLeftLink","primary_500","FooterRightContainer","Footer","Wrapper","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","icon","rest","id","getLeftActionIconElement","leftFooterAction","cloneElement","size","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","onBack","title","note","children","footerActions","item","a","key","zIndex"],"sources":["../../src/Modals/ModalContent.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {ButtonAction, IconButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling, ComponentSStyling,\n  ComponentTextStyle, ComponentXLStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling,\n  scrollBarStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {HyperLink} from '../HyperLink';\n\nconst HeaderText = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  padding: 12px 0 12px 12px;\n  gap: 4px;\n  \n  &:not(:first-child) {\n    padding-left: 0 !important;\n  }\n  \n`;\nconst HeaderTitle = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\nconst HeaderNote = styled.div`\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderActions = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst Header = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ${TooltipContainer} {\n    height: max-content;\n  }\n`;\n\nconst Content = styled.div`\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst FooterLeftContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n`;\n\nconst FooterRightContainer = styled.div`\n  gap: 8px;\n  margin-left: auto;\n`\n\nconst Footer = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: max-content;\n\n  max-height: calc(100vh - 32px);\n  max-width: calc(100vw - 32px);\n\n  &.medium {\n    max-height: calc(100vh - 64px);\n    max-width: calc(100vw - 64px);\n\n    ${Header} {\n      padding: 12px 12px 4px 12px;\n\n      ${HeaderText} {\n        padding: 12px 0 12px 12px;\n        gap: 4px;\n\n        ${HeaderTitle} {\n          ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n        }\n\n        ${HeaderNote} {\n          ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 16px 0 24px;\n    }\n\n    ${Footer} {\n      padding: 12px 24px 20px 24px;\n\n      ${FooterLeftNote} {\n        ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n        gap: 6px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 6px;\n        }\n\n        ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 8px;\n      }\n    }\n  }\n\n  &.large {\n    max-height: calc(100vh - 112px);\n    max-width: calc(100vw - 112px);\n\n    ${Header} {\n      padding: 20px 20px 4px 20px;\n\n      ${HeaderText} {\n        padding: 10px 0 10px 12px;\n        gap: 8px;\n\n        ${HeaderTitle} {\n          ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n        }\n\n        ${HeaderNote} {\n          ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 24px 0 32px;\n    }\n\n    ${Footer} {\n      padding: 16px 32px 32px 32px;\n\n      ${FooterLeftNote} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n        gap: 8px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 8px;\n        }\n\n        ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 16px;\n      }\n    }\n  }\n`;\n\n\ninterface ModalContentProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  isModalOpen: boolean;\n  closeAction: () => void;\n  onBack?: () => void;\n  title: string;\n  note?: string;\n  headerActions?: IconButtonAction[];\n  footerActions?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  zIndex?: number;\n  children?: React.ReactNode;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n  const tooltip = () =>\n    !!props.tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n                    label={props.tooltip}>\n      <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n      }}>\n        <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n  const headerActions = () => props.headerActions?.map((action, index) => {\n      const {icon, ...rest} = action;\n      return <IconButton key={action.id || index}\n                         {...rest}>\n        {icon}\n      </IconButton>\n    }\n  );\n\n  const getLeftActionIconElement = () =>\n    !!props.leftFooterAction?.icon &&\n    React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n      size:\n        props.size === Size.Small\n          ? '20px'\n          : props.size === Size.Large\n            ? '28px'\n            : '24px'\n    });\n\n  const leftFooterAction = () => {\n    if (!props.leftFooterAction) return null;\n\n    switch (props.leftFooterAction.actionType) {\n      case 'button': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n        return (\n          <Button{...rest}\n                 size={props.size}\n                 onClick={action}\n                 variant={variant ?? 'secondary'}>\n            {text}\n          </Button>\n        );\n      }\n      case 'hyperlink': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n        return (\n          <FooterLeftLink>\n            <HyperLink {...rest}\n                       variant={variant ?? 'default'}\n                       onClick={(e) => {\n                         if (action) {\n                           e.preventDefault();\n                           action(e);\n                         }\n                       }}>\n              {getLeftActionIconElement()}\n              {text}\n            </HyperLink>\n          </FooterLeftLink>\n        );\n\n      }\n      case 'note': {\n        const {text} = props.leftFooterAction;\n        return (\n          <FooterLeftNote>\n            {getLeftActionIconElement()}\n            <span>{text}</span>\n          </FooterLeftNote>\n        );\n      }\n    }\n  };\n\n\n  return (\n    <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n      <Wrapper className={props.size ?? Size.Medium}>\n        <Header>\n          {\n            props.onBack &&\n            <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n              <SystemIcons.ArrowLineLeft/>\n            </IconButton>\n          }\n          <HeaderText>\n            <HeaderTitle>{props.title}</HeaderTitle>\n            {!!props.note && <HeaderNote>{props.note}</HeaderNote>}\n          </HeaderText>\n          <HeaderActions>\n            {tooltip()}\n            {headerActions()}\n            <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'} variant=\"secondary\" shape=\"circular\"\n                        action={props.closeAction}>\n              <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n            </IconButton>\n          </HeaderActions>\n        </Header>\n        <Content>\n          {props.children}\n        </Content>\n        <Footer>\n          <FooterLeftContainer>\n            {leftFooterAction()}\n          </FooterLeftContainer>\n          <FooterRightContainer>\n            {props.footerActions?.map((item, index) => {\n                const {action, text, ...rest} = item;\n                return <Button key={rest.id || index}\n                               {...rest}\n                               onClick={action}\n                               size={props.size}\n                               onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n                  {text}\n                </Button>\n              }\n            )}\n          </FooterRightContainer>\n        </Footer>\n      </Wrapper>\n    </ModalContainer>\n  );\n};\n\nexport default ModalContent;\n"],"mappings":"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"}
+{"version":3,"file":"ModalContent.js","names":["React","Size","ModalContainer","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXLStyling","ComponentXSStyling","ComponentXXSStyling","scrollBarStyling","TooltipContainer","TooltipWrapper","Button","IconButton","SystemIcons","HyperLink","HeaderText","div","HeaderTitle","Bold","black","HeaderNote","Regular","neutral_600","HeaderActions","Header","Content","Small","FooterLeftContainer","FooterLeftNote","FooterLeftLink","primary_500","FooterRightContainer","Footer","Wrapper","ModalContent","props","tooltip","XSmall","cursor","headerActions","map","action","index","icon","rest","id","getLeftActionIconElement","leftFooterAction","cloneElement","size","Large","actionType","text","variant","e","preventDefault","isModalOpen","closeAction","Medium","onBack","title","note","children","footerActions","item","a","key","zIndex"],"sources":["../../src/Modals/ModalContent.tsx"],"sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport {ButtonAction, IconButtonAction, LeftFooterAction, LeftFooterButton, LeftFooterHyperlink} from './ModalTypes';\nimport {ModalContainer} from './index';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling, ComponentSStyling,\n  ComponentTextStyle, ComponentXLStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling,\n  scrollBarStyling\n} from '../styles';\nimport {TooltipContainer, TooltipWrapper} from '../Tooltips';\nimport {Button, IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {HyperLink} from '../HyperLink';\n\nconst HeaderText = styled.div`\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  padding: 12px 0 12px 12px;\n  gap: 4px;\n  \n  &:not(:first-child) {\n    padding-left: 0 !important;\n  }\n  \n`;\nconst HeaderTitle = styled.div`\n  ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.black)}\n`;\nconst HeaderNote = styled.div`\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n`;\n\nconst HeaderActions = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst Header = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 4px;\n\n  ${TooltipContainer} {\n    height: max-content;\n  }\n`;\n\nconst Content = styled.div`\n  margin-right: 8px;\n  padding: 0 8px 0 16px;\n  overflow: auto;\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst FooterLeftContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst FooterLeftNote = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n\n  ${ComponentXXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst FooterLeftLink = styled.div`\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n`;\n\nconst FooterRightContainer = styled.div`\n  gap: 8px;\n  margin-left: auto;\n`\n\nconst Footer = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 8px 16px;\n`;\n\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: max-content;\n\n  max-height: calc(100vh - 32px);\n  max-width: calc(100vw - 32px);\n\n  &.medium {\n    max-height: calc(100vh - 64px);\n    max-width: calc(100vw - 64px);\n\n    ${Header} {\n      padding: 12px 12px 4px 12px;\n\n      ${HeaderText} {\n        padding: 12px 0 12px 12px;\n        gap: 4px;\n\n        ${HeaderTitle} {\n          ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n        }\n\n        ${HeaderNote} {\n          ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 16px 0 24px;\n    }\n\n    ${Footer} {\n      padding: 12px 24px 20px 24px;\n\n      ${FooterLeftNote} {\n        ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n        gap: 6px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 6px;\n        }\n\n        ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 8px;\n      }\n    }\n  }\n\n  &.large {\n    max-height: calc(100vh - 112px);\n    max-width: calc(100vw - 112px);\n\n    ${Header} {\n      padding: 20px 20px 4px 20px;\n\n      ${HeaderText} {\n        padding: 10px 0 10px 12px;\n        gap: 8px;\n\n        ${HeaderTitle} {\n          ${ComponentXLStyling(ComponentTextStyle.Bold, null)}\n        }\n\n        ${HeaderNote} {\n          ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n        }\n      }\n    }\n\n    ${Content} {\n      padding: 0 24px 0 32px;\n    }\n\n    ${Footer} {\n      padding: 16px 32px 32px 32px;\n\n      ${FooterLeftNote} {\n        ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n        gap: 8px;\n      }\n\n      ${FooterLeftLink} {\n        a {\n          gap: 8px;\n        }\n\n        ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n      }\n\n      ${FooterRightContainer} {\n        gap: 16px;\n      }\n    }\n  }\n`;\n\n\ninterface ModalContentProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  isModalOpen: boolean;\n  closeAction: () => void;\n  onBack?: () => void;\n  title: string;\n  note?: string;\n  headerActions?: IconButtonAction[];\n  footerActions?: ButtonAction[];\n  leftFooterAction?: LeftFooterAction;\n  tooltip?: string;\n  zIndex?: number;\n  children?: React.ReactNode;\n}\n\nconst ModalContent: React.FC<ModalContentProps> = (props) => {\n\n  const tooltip = () =>\n    !!props.tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall} align=\"center\" position=\"bottom\" withArrow={false}\n                    label={props.tooltip}>\n      <IconButton variant=\"secondary\" shape=\"circular\" style={{cursor: 'help'}} action={() => {\n      }}>\n        <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n  const headerActions = () => props.headerActions?.map((action, index) => {\n      const {icon, ...rest} = action;\n      return <IconButton key={action.id || index}\n                         {...rest}>\n        {icon}\n      </IconButton>\n    }\n  );\n\n  const getLeftActionIconElement = () =>\n    !!props.leftFooterAction?.icon &&\n    React.cloneElement(props.leftFooterAction?.icon as React.ReactElement, {\n      size:\n        props.size === Size.Small\n          ? '20px'\n          : props.size === Size.Large\n            ? '28px'\n            : '24px'\n    });\n\n  const leftFooterAction = () => {\n    if (!props.leftFooterAction) return null;\n\n    switch (props.leftFooterAction.actionType) {\n      case 'button': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterButton;\n        return (\n          <Button{...rest}\n                 size={props.size}\n                 onClick={action}\n                 variant={variant ?? 'secondary'}>\n            {text}\n          </Button>\n        );\n      }\n      case 'hyperlink': {\n        const {text, variant, action, ...rest} = props.leftFooterAction as LeftFooterHyperlink;\n        return (\n          <FooterLeftLink>\n            <HyperLink {...rest}\n                       variant={variant ?? 'default'}\n                       onClick={(e) => {\n                         if (action) {\n                           e.preventDefault();\n                           action(e);\n                         }\n                       }}>\n              {text}\n              {getLeftActionIconElement()}\n            </HyperLink>\n          </FooterLeftLink>\n        );\n\n      }\n      case 'note': {\n        const {text} = props.leftFooterAction;\n        return (\n          <FooterLeftNote>\n            {getLeftActionIconElement()}\n            <span>{text}</span>\n          </FooterLeftNote>\n        );\n      }\n    }\n  };\n\n\n  return (\n    <ModalContainer showModal={props.isModalOpen} closeModal={props.closeAction}>\n      <Wrapper className={props.size ?? Size.Medium}>\n        <Header>\n          {\n            props.onBack &&\n            <IconButton variant=\"secondary\" shape=\"circular\" action={props.onBack}>\n              <SystemIcons.ArrowLineLeft/>\n            </IconButton>\n          }\n          <HeaderText>\n            <HeaderTitle>{props.title}</HeaderTitle>\n            {!!props.note && <HeaderNote>{props.note}</HeaderNote>}\n          </HeaderText>\n          <HeaderActions>\n            {tooltip()}\n            {headerActions()}\n            <IconButton dataTestId={'content-modal-close-button'} id={'content-modal-close-button'} variant=\"secondary\" shape=\"circular\"\n                        action={props.closeAction}>\n              <SystemIcons.Close size=\"24px\" color={COLORS.neutral_600}/>\n            </IconButton>\n          </HeaderActions>\n        </Header>\n        <Content>\n          {props.children}\n        </Content>\n        <Footer>\n          <FooterLeftContainer>\n            {leftFooterAction()}\n          </FooterLeftContainer>\n          <FooterRightContainer>\n            {props.footerActions?.map((item, index) => {\n                const {action, text, ...rest} = item;\n                return <Button key={rest.id || index}\n                               {...rest}\n                               onClick={action}\n                               size={props.size}\n                               onKeyDown={a => (a.key === 'Enter' || a.key === ' ') && action!(a)}>\n                  {text}\n                </Button>\n              }\n            )}\n          </FooterRightContainer>\n        </Footer>\n      </Wrapper>\n    </ModalContainer>\n  );\n};\n\nexport default ModalContent;\n"],"mappings":"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"}

package/dist/Modals/ModalDialog.cjs

@@ -238,7 +238,7 @@ var ModalDialog = function ModalDialog(_ref) {
               action(e);
             }
           },
-          children: [icon && getLeftActionIconElement(icon), text]
+          children: [text, icon && getLeftActionIconElement(icon)]
         });
       case 'note':
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {