@laerdal/life-react-components 1.11.0-dev.18 → 1.11.0-dev.19

package/dist/InputFields/ResponsiveComponentWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveComponentWrapper.js","names":["React","Size","BREAKPOINTS","ComponentXXS","ComponentXS","ReponsiveComponentWrapper","children","size","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","MEDIUM","replace","matches","addEventListener","cleanup","removeEventListener","Medium","Small"],"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\n\n// Add component-specific types\ntype LabelProps = {\n  size?: Size.Small | Size.Medium;\n  children?: any;\n};\n\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\n  // Globally used variables within the component\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\n      setIsMediumView(mql.matches);\n    };\n    window.addEventListener('resize', handleResize);\n    return function cleanup() {\n      window.removeEventListener('resize', handleResize);\n    };\n  });\n\n  return size && size === Size.Medium ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : size && size === Size.Small ? (\n    <ComponentXXS>{children}</ComponentXXS>\n  ) : isMediumView ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : (\n    <ComponentXXS>{children}</ComponentXXS>\n  );\n};\n\nexport default ReponsiveComponentWrapper;\n"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,QAAqB,UAArB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,YAAtB,EAAoCC,WAApC,QAAuD,WAAvD,C,CAEA;;;;AAMA,IAAMC,yBAA8D,GAAG,SAAjEA,yBAAiE,OAAoC;EAAA,IAAjCC,QAAiC,QAAjCA,QAAiC;EAAA,IAAvBC,IAAuB,QAAvBA,IAAuB;;EACzG;EACA,sBAAwCP,KAAK,CAACQ,QAAN,CAAwB,KAAxB,CAAxC;EAAA;EAAA,IAAOC,YAAP;EAAA,IAAqBC,eAArB;;EAEAV,KAAK,CAACW,SAAN,CAAgB,YAAM;IACpB,IAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;MACzB,IAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,WAAqBb,WAAW,CAACc,MAAZ,CAAmBC,OAAnB,CAA2B,SAA3B,EAAsC,EAAtC,CAArB,EAAZ;MACAP,eAAe,CAACG,GAAG,CAACK,OAAL,CAAf;IACD,CAHD;;IAIAJ,MAAM,CAACK,gBAAP,CAAwB,QAAxB,EAAkCP,YAAlC;IACA,OAAO,SAASQ,OAAT,GAAmB;MACxBN,MAAM,CAACO,mBAAP,CAA2B,QAA3B,EAAqCT,YAArC;IACD,CAFD;EAGD,CATD;EAWA,OAAOL,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACqB,MAAtB,gBACL,KAAC,WAAD;IAAA,UAAchB;EAAd,EADK,GAEHC,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACsB,KAAtB,gBACF,KAAC,YAAD;IAAA,UAAejB;EAAf,EADE,GAEAG,YAAY,gBACd,KAAC,WAAD;IAAA,UAAcH;EAAd,EADc,gBAGd,KAAC,YAAD;IAAA,UAAeA;EAAf,EAPF;AASD,CAxBD;;;EAHEA,Q;;AA6BF,eAAeD,yBAAf"}
+{"version":3,"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"names":["React","Size","BREAKPOINTS","ComponentXXS","ComponentXS","ReponsiveComponentWrapper","children","size","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","MEDIUM","replace","matches","addEventListener","cleanup","removeEventListener","Medium","Small"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,QAAqB,UAArB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,YAAtB,EAAoCC,WAApC,QAAuD,WAAvD,C,CAEA;;;;AAMA,IAAMC,yBAA8D,GAAG,SAAjEA,yBAAiE,OAAoC;AAAA,MAAjCC,QAAiC,QAAjCA,QAAiC;AAAA,MAAvBC,IAAuB,QAAvBA,IAAuB;;AACzG;AACA,wBAAwCP,KAAK,CAACQ,QAAN,CAAwB,KAAxB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;;AAEAV,EAAAA,KAAK,CAACW,SAAN,CAAgB,YAAM;AACpB,QAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,UAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,WAAqBb,WAAW,CAACc,MAAZ,CAAmBC,OAAnB,CAA2B,SAA3B,EAAsC,EAAtC,CAArB,EAAZ;AACAP,MAAAA,eAAe,CAACG,GAAG,CAACK,OAAL,CAAf;AACD,KAHD;;AAIAJ,IAAAA,MAAM,CAACK,gBAAP,CAAwB,QAAxB,EAAkCP,YAAlC;AACA,WAAO,SAASQ,OAAT,GAAmB;AACxBN,MAAAA,MAAM,CAACO,mBAAP,CAA2B,QAA3B,EAAqCT,YAArC;AACD,KAFD;AAGD,GATD;AAWA,SAAOL,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACqB,MAAtB,gBACL,KAAC,WAAD;AAAA,cAAchB;AAAd,IADK,GAEHC,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACsB,KAAtB,gBACF,KAAC,YAAD;AAAA,cAAejB;AAAf,IADE,GAEAG,YAAY,gBACd,KAAC,WAAD;AAAA,cAAcH;AAAd,IADc,gBAGd,KAAC,YAAD;AAAA,cAAeA;AAAf,IAPF;AASD,CAxBD;;;AAHEA,EAAAA,Q;;AA6BF,eAAeD,yBAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\n\n// Add component-specific types\ntype LabelProps = {\n  size?: Size.Small | Size.Medium;\n  children?: any;\n};\n\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\n  // Globally used variables within the component\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\n      setIsMediumView(mql.matches);\n    };\n    window.addEventListener('resize', handleResize);\n    return function cleanup() {\n      window.removeEventListener('resize', handleResize);\n    };\n  });\n\n  return size && size === Size.Medium ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : size && size === Size.Small ? (\n    <ComponentXXS>{children}</ComponentXXS>\n  ) : isMediumView ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : (\n    <ComponentXXS>{children}</ComponentXXS>\n  );\n};\n\nexport default ReponsiveComponentWrapper;\n"],"file":"ResponsiveComponentWrapper.js"}

package/dist/InputFields/SearchBar.cjs.map

@@ -1 +1 @@
-{"version":3,"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 {Search as SearchIcon, Clear as ClearIcon, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\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 = '4px 0',\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              <SearchIcon size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n\n      {showDropdown && <DropdownContent id={'search'}\n                                        containerRef={containerRef}\n          size={size}\n          isButton={false}\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          <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,"sources":["../../src/InputFields/SearchBar.tsx"],"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","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","COLORS","critical_400"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;AAyBA,IAAMA,gBAAgB,GAAGC,0BAAOC,GAAV,mLAAtB;;AASA,IAAMC,SAAiD,GAAG,SAApDA,SAAoD,OAqBO;AAAA,MApBJC,EAoBI,QApBJA,EAoBI;AAAA,MAnBJC,UAmBI,QAnBJA,UAmBI;AAAA,MAlBJC,cAkBI,QAlBJA,aAkBI;AAAA,MAjBJC,WAiBI,QAjBJA,WAiBI;AAAA,MAhBJC,YAgBI,QAhBJA,YAgBI;AAAA,MAfJC,WAeI,QAfJA,WAeI;AAAA,MAdJC,kBAcI,QAdJA,kBAcI;AAAA,MAbJC,QAaI,QAbJA,QAaI;AAAA,MAZJC,iBAYI,QAZJA,iBAYI;AAAA,MAXJC,SAWI,QAXJA,SAWI;AAAA,MAVJC,IAUI,QAVJA,IAUI;AAAA,yBATJC,MASI;AAAA,MATJA,MASI,4BATK,OASL;AAAA,MARJC,YAQI,QARJA,YAQI;AAAA,MAPJC,kBAOI,QAPJA,kBAOI;AAAA,MANJC,mBAMI,QANJA,mBAMI;AAAA,MALJC,qBAKI,QALJA,qBAKI;AAAA,MAJJC,oBAII,QAJJA,oBAII;AAAA,6BAHJC,UAGI;AAAA,MAHJA,UAGI,gCAHO,EAGP;AAAA,MAFJC,eAEI,QAFJA,eAEI;AAAA,MADJC,kBACI,QADJA,kBACI;;AAC/D,MAAMC,YAAY,GAAGC,eAAMC,MAAN,CAAkB,IAAlB,CAArB;;AAEA,wBAA4BD,eAAME,QAAN,CAAe,KAAf,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AACA,MAAMC,WAAW,GAAG,gCAAmB;AAAA,WAAID,SAAS,CAAC,KAAD,CAAb;AAAA,GAAnB,EAAyC,CAACL,YAAD,CAAzC,CAApB;;AAEA,MAAMO,eAAe,GAAG,SAAlBA,eAAkB,CAACC,CAAD,EAAY;AAClC,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBD,MAAAA,CAAC,CAACE,cAAF;AACAF,MAAAA,CAAC,CAACG,eAAF;AACA,aAAO,IAAP;AACD;;AACD,WAAO,KAAP;AACD,GAPD;;AASA,MAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACJ,CAAD,EAAY;AACpCV,IAAAA,eAAe,IAAIA,eAAe,CAAC;AAACe,MAAAA,KAAK,EAACL,CAAC,CAACM,MAAF,CAASD;AAAhB,KAAD,CAAlC;AACA9B,IAAAA,WAAW,CAACyB,CAAD,CAAX;AACD,GAHD;;AAKA,MAAMO,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAC3B,QAAGnB,oBAAH,EACEA,oBAAoB;AACvB,GAHD;;AAKA,sBACE;AAAA,4BACE,sBAAC,qBAAD;AACE,MAAA,QAAQ,EAAET,QADZ;AAEE,MAAA,MAAM,EAAEI,MAFV;AAAA,8BAGE,sBAAC,oBAAD;AAAa,QAAA,EAAE,EAAE,IAAjB;AAAuB,QAAA,IAAI,EAAED,IAA7B;AACa,QAAA,GAAG,EAAEU,YADlB;AAEa,QAAA,UAAU,EAAEnB,UAFzB;AAGa,QAAA,QAAQ,EAAEM,QAHvB;AAIa,QAAA,iBAAiB,EAAEC,iBAJhC;AAAA,gCAKE,qBAAC,uBAAD;AACE,UAAA,WAAW,EAAED,QAAQ,GAAG,EAAH,GAAQF,WAD/B;AAEE,UAAA,EAAE,EAAEL,EAFN;AAGE,UAAA,IAAI,EAAEU,IAHR;AAIE,UAAA,QAAQ,EAAEH,QAJZ;AAKE,UAAA,aAAa,EAAE,uBAAC6B,IAAD;AAAA,mBAAkBlC,cAAa,CAACkC,IAAD,CAA/B;AAAA,WALjB;AAME,UAAA,UAAU,EAAEnC,UANd;AAOE,UAAA,SAAS,EAAEQ,SAPb;AAQE,UAAA,WAAW,EAAEuB,iBARf;AASE,UAAA,eAAe,EAAE,CAACZ,YAAD,CATnB;AAUE,UAAA,OAAO,EAAE;AAAA,mBAAIK,SAAS,CAAC,CAACD,MAAF,CAAb;AAAA,WAVX;AAWE,UAAA,GAAG,EAAEE;AAXP,UALF,eAkBE,qBAAC,0BAAD;AAAmB,UAAA,SAAS,EAAEhB,IAAI,GAAGA,IAAH,GAAU,EAA5C;AAAgD,wBAAYJ,kBAA5D;AAAA,iCACE,qBAAC,kBAAD;AAAY,YAAA,EAAE,YAAKN,EAAL,YAAd;AACY,YAAA,OAAO,EAAC,WADpB;AAEY,YAAA,KAAK,EAAC,UAFlB;AAGY,YAAA,MAAM,EAAEG,WAHpB;AAIY,YAAA,QAAQ,EAAEI,QAJtB;AAKY,YAAA,UAAU,EAAE,oBAACqB,CAAD;AAAA,qBAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBzB,WAAW,CAACyB,CAAD,CAAhC,GAAsC,IAAnD;AAAA,aALxB;AAAA,mCAME,qBAAC,mBAAD;AAAY,cAAA,IAAI,EAAC;AAAjB;AANF;AADF,UAlBF,eA4BE,qBAAC,gBAAD;AAAkB,UAAA,SAAS,EAAE,CAAClB,IAAI,GAAGA,IAAH,GAAU,EAAf,EAAmB2B,MAAnB,CAA0B,CAACpC,UAAD,GAAc,SAAd,GAA0B,EAApD,CAA7B;AAAA,iCACE,qBAAC,kBAAD;AAAY,YAAA,EAAE,YAAKD,EAAL,WAAd;AACY,YAAA,OAAO,EAAC,WADpB;AAEY,YAAA,KAAK,EAAC,UAFlB;AAGY,YAAA,MAAM,EAAEI,YAHpB;AAIY,YAAA,QAAQ,EAAEG,QAJtB;AAKY,YAAA,UAAU,EAAE,oBAACqB,CAAD;AAAA,qBAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBxB,YAAY,CAACwB,CAAD,CAAjC,GAAuC,IAApD;AAAA,aALxB;AAAA,mCAME,qBAAC,kBAAD;AAAW,cAAA,IAAI,EAAC;AAAhB;AANF;AADF,UA5BF;AAAA,QAHF,EA2CChB,YAAY,iBAAI,qBAAC,yBAAD;AAAiB,QAAA,EAAE,EAAE,QAArB;AACiB,QAAA,YAAY,EAAEQ,YAD/B;AAEb,QAAA,IAAI,EAAEV,IAFO;AAGb,QAAA,QAAQ,EAAE,KAHG;AAIb,QAAA,kBAAkB,EAAE;AAClB4B,UAAAA,KAAK,EAACrB,UADY;AAElBsB,UAAAA,MAAM,EAAEJ,cAFU;AAGlBK,UAAAA,WAAW,EAAE1B,mBAHK;AAIlB2B,UAAAA,UAAU,EAAE5B,kBAJM;AAKlB6B,UAAAA,aAAa,EAAE3B,qBALG;AAMlB4B,UAAAA,aAAa,EAAC,uBAACf,CAAD,EAAK,CAAE,CANH;AAOlBgB,UAAAA,UAAU,EAAEzB,kBAPM;AAQlB0B,UAAAA,UAAU,EAAE;AARM,SAJP;AAcb,QAAA,MAAM,EAAErB,MAdK;AAeb,QAAA,SAAS,EAAEC,SAfE;AAgBb,QAAA,MAAM,EAAE,EAhBK;AAiBb,QAAA,cAAc,EAAExB,UAAU,GAAG,CAACA,UAAD,CAAH,GAAkB,EAjB/B;AAkBb,QAAA,iBAAiB,EAAE,2BAAC2B,CAAD;AAAA,iBAAK1B,cAAa,CAAC0B,CAAC,CAAC,CAAD,CAAF,CAAlB;AAAA,SAlBN;AAmBb,QAAA,kBAAkB,EAAE,EAnBP;AAoBb,QAAA,OAAO,EAAE,IApBI;AAqBb,QAAA,UAAU,EAAE,sBAAI,CAAE;AArBL,QA3CjB;AAAA,MADF,EAqEGpB,iBAAiB,iBAChB,sBAAC,qBAAD;AAAc,MAAA,SAAS,EAAEE,IAAI,IAAI,EAAjC;AAAA,8BACE,qBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEoC,cAAOC,YAAhC;AAA8C,QAAA,SAAS,EAAErC,IAAI,IAAI;AAAjE,QADF,eAEE;AAAA,kBAAOF;AAAP,QAFF;AAAA,MAtEJ;AAAA,IADF;AA8ED,CA5HD;;;AA/BER,EAAAA,E;AACAC,EAAAA,U;AACAC,EAAAA,a;AACAC,EAAAA,W;AACAC,EAAAA,Y;AACAC,EAAAA,W;AACAC,EAAAA,kB;AACAC,EAAAA,Q;AACAC,EAAAA,iB;AACAC,EAAAA,S;AAEAE,EAAAA,M;AACAC,EAAAA,Y;AACAC,EAAAA,kB;AACAC,EAAAA,mB;AACAC,EAAAA,qB,4BAAwB,S,EAAY,W,EAAc,U;AAClDC,EAAAA,oB;AACAC,EAAAA,U;AACAC,EAAAA,e;AACAC,EAAAA,kB;;eA0IapB,S","sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {Search as SearchIcon, Clear as ClearIcon, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\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 = '4px 0',\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              <SearchIcon size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n\n      {showDropdown && <DropdownContent id={'search'}\n                                        containerRef={containerRef}\n          size={size}\n          isButton={false}\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          <TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"file":"SearchBar.cjs"}

package/dist/InputFields/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","names":["React","COLORS","Search","SearchIcon","Clear","ClearIcon","TechnicalWarning","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 {Search as SearchIcon, Clear as ClearIcon, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\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 = '4px 0',\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              <SearchIcon size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n\n      {showDropdown && <DropdownContent id={'search'}\n                                        containerRef={containerRef}\n          size={size}\n          isButton={false}\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          <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,"sources":["../../src/InputFields/SearchBar.tsx"],"names":["React","COLORS","Search","SearchIcon","Clear","ClearIcon","TechnicalWarning","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"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,MAAR,QAAqB,iBAArB;AACA,SAAQC,MAAM,IAAIC,UAAlB,EAA8BC,KAAK,IAAIC,SAAvC,EAAkDC,gBAAlD,QAAyE,kCAAzE;AACA,SAAQC,YAAR,EAAsBC,YAAtB,EAAoCC,iBAApC,QAA4D,WAA5D;AACA,SAAQC,UAAR,QAAyB,WAAzB;AACA,OAAOC,cAAP,MAA2B,6BAA3B;AACA,OAAOC,WAAP,MAAwB,0BAAxB;AAEA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,eAAT,QAA8C,aAA9C;AACA,SAASC,kBAAT,QAAmC,WAAnC;;;;AAyBA,IAAMC,gBAAgB,GAAGH,MAAM,CAACI,GAAV,qKAAtB;;AASA,IAAMC,SAAiD,GAAG,SAApDA,SAAoD,OAqBO;AAAA,MApBJC,EAoBI,QApBJA,EAoBI;AAAA,MAnBJC,UAmBI,QAnBJA,UAmBI;AAAA,MAlBJC,cAkBI,QAlBJA,aAkBI;AAAA,MAjBJC,WAiBI,QAjBJA,WAiBI;AAAA,MAhBJC,YAgBI,QAhBJA,YAgBI;AAAA,MAfJC,WAeI,QAfJA,WAeI;AAAA,MAdJC,kBAcI,QAdJA,kBAcI;AAAA,MAbJC,QAaI,QAbJA,QAaI;AAAA,MAZJC,iBAYI,QAZJA,iBAYI;AAAA,MAXJC,SAWI,QAXJA,SAWI;AAAA,MAVJC,IAUI,QAVJA,IAUI;AAAA,yBATJC,MASI;AAAA,MATJA,MASI,4BATK,OASL;AAAA,MARJC,YAQI,QARJA,YAQI;AAAA,MAPJC,kBAOI,QAPJA,kBAOI;AAAA,MANJC,mBAMI,QANJA,mBAMI;AAAA,MALJC,qBAKI,QALJA,qBAKI;AAAA,MAJJC,oBAII,QAJJA,oBAII;AAAA,6BAHJC,UAGI;AAAA,MAHJA,UAGI,gCAHO,EAGP;AAAA,MAFJC,eAEI,QAFJA,eAEI;AAAA,MADJC,kBACI,QADJA,kBACI;AAC/D,MAAMC,YAAY,GAAGvC,KAAK,CAACwC,MAAN,CAAkB,IAAlB,CAArB;;AAEA,wBAA4BxC,KAAK,CAACyC,QAAN,CAAe,KAAf,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AACA,MAAMC,WAAW,GAAG7B,kBAAkB,CAAC;AAAA,WAAI4B,SAAS,CAAC,KAAD,CAAb;AAAA,GAAD,EAAuB,CAACJ,YAAD,CAAvB,CAAtC;;AAEA,MAAMM,eAAe,GAAG,SAAlBA,eAAkB,CAACC,CAAD,EAAY;AAClC,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBD,MAAAA,CAAC,CAACE,cAAF;AACAF,MAAAA,CAAC,CAACG,eAAF;AACA,aAAO,IAAP;AACD;;AACD,WAAO,KAAP;AACD,GAPD;;AASA,MAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACJ,CAAD,EAAY;AACpCT,IAAAA,eAAe,IAAIA,eAAe,CAAC;AAACc,MAAAA,KAAK,EAACL,CAAC,CAACM,MAAF,CAASD;AAAhB,KAAD,CAAlC;AACA7B,IAAAA,WAAW,CAACwB,CAAD,CAAX;AACD,GAHD;;AAKA,MAAMO,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAC3B,QAAGlB,oBAAH,EACEA,oBAAoB;AACvB,GAHD;;AAKA,sBACE;AAAA,4BACE,MAAC,YAAD;AACE,MAAA,QAAQ,EAAET,QADZ;AAEE,MAAA,MAAM,EAAEI,MAFV;AAAA,8BAGE,MAAC,WAAD;AAAa,QAAA,EAAE,EAAE,IAAjB;AAAuB,QAAA,IAAI,EAAED,IAA7B;AACa,QAAA,GAAG,EAAEU,YADlB;AAEa,QAAA,UAAU,EAAEnB,UAFzB;AAGa,QAAA,QAAQ,EAAEM,QAHvB;AAIa,QAAA,iBAAiB,EAAEC,iBAJhC;AAAA,gCAKE,KAAC,cAAD;AACE,UAAA,WAAW,EAAED,QAAQ,GAAG,EAAH,GAAQF,WAD/B;AAEE,UAAA,EAAE,EAAEL,EAFN;AAGE,UAAA,IAAI,EAAEU,IAHR;AAIE,UAAA,QAAQ,EAAEH,QAJZ;AAKE,UAAA,aAAa,EAAE,uBAAC4B,IAAD;AAAA,mBAAkBjC,cAAa,CAACiC,IAAD,CAA/B;AAAA,WALjB;AAME,UAAA,UAAU,EAAElC,UANd;AAOE,UAAA,SAAS,EAAEQ,SAPb;AAQE,UAAA,WAAW,EAAEsB,iBARf;AASE,UAAA,eAAe,EAAE,CAACX,YAAD,CATnB;AAUE,UAAA,OAAO,EAAE;AAAA,mBAAII,SAAS,CAAC,CAACD,MAAF,CAAb;AAAA,WAVX;AAWE,UAAA,GAAG,EAAEE;AAXP,UALF,eAkBE,KAAC,iBAAD;AAAmB,UAAA,SAAS,EAAEf,IAAI,GAAGA,IAAH,GAAU,EAA5C;AAAgD,wBAAYJ,kBAA5D;AAAA,iCACE,KAAC,UAAD;AAAY,YAAA,EAAE,YAAKN,EAAL,YAAd;AACY,YAAA,OAAO,EAAC,WADpB;AAEY,YAAA,KAAK,EAAC,UAFlB;AAGY,YAAA,MAAM,EAAEG,WAHpB;AAIY,YAAA,QAAQ,EAAEI,QAJtB;AAKY,YAAA,UAAU,EAAE,oBAACoB,CAAD;AAAA,qBAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBxB,WAAW,CAACwB,CAAD,CAAhC,GAAsC,IAAnD;AAAA,aALxB;AAAA,mCAME,KAAC,UAAD;AAAY,cAAA,IAAI,EAAC;AAAjB;AANF;AADF,UAlBF,eA4BE,KAAC,gBAAD;AAAkB,UAAA,SAAS,EAAE,CAACjB,IAAI,GAAGA,IAAH,GAAU,EAAf,EAAmB0B,MAAnB,CAA0B,CAACnC,UAAD,GAAc,SAAd,GAA0B,EAApD,CAA7B;AAAA,iCACE,KAAC,UAAD;AAAY,YAAA,EAAE,YAAKD,EAAL,WAAd;AACY,YAAA,OAAO,EAAC,WADpB;AAEY,YAAA,KAAK,EAAC,UAFlB;AAGY,YAAA,MAAM,EAAEI,YAHpB;AAIY,YAAA,QAAQ,EAAEG,QAJtB;AAKY,YAAA,UAAU,EAAE,oBAACoB,CAAD;AAAA,qBAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBvB,YAAY,CAACuB,CAAD,CAAjC,GAAuC,IAApD;AAAA,aALxB;AAAA,mCAME,KAAC,SAAD;AAAW,cAAA,IAAI,EAAC;AAAhB;AANF;AADF,UA5BF;AAAA,QAHF,EA2CCf,YAAY,iBAAI,KAAC,eAAD;AAAiB,QAAA,EAAE,EAAE,QAArB;AACiB,QAAA,YAAY,EAAEQ,YAD/B;AAEb,QAAA,IAAI,EAAEV,IAFO;AAGb,QAAA,QAAQ,EAAE,KAHG;AAIb,QAAA,kBAAkB,EAAE;AAClB2B,UAAAA,KAAK,EAACpB,UADY;AAElBqB,UAAAA,MAAM,EAAEJ,cAFU;AAGlBK,UAAAA,WAAW,EAAEzB,mBAHK;AAIlB0B,UAAAA,UAAU,EAAE3B,kBAJM;AAKlB4B,UAAAA,aAAa,EAAE1B,qBALG;AAMlB2B,UAAAA,aAAa,EAAC,uBAACf,CAAD,EAAK,CAAE,CANH;AAOlBgB,UAAAA,UAAU,EAAExB,kBAPM;AAQlByB,UAAAA,UAAU,EAAE;AARM,SAJP;AAcb,QAAA,MAAM,EAAErB,MAdK;AAeb,QAAA,SAAS,EAAEC,SAfE;AAgBb,QAAA,MAAM,EAAE,EAhBK;AAiBb,QAAA,cAAc,EAAEvB,UAAU,GAAG,CAACA,UAAD,CAAH,GAAkB,EAjB/B;AAkBb,QAAA,iBAAiB,EAAE,2BAAC0B,CAAD;AAAA,iBAAKzB,cAAa,CAACyB,CAAC,CAAC,CAAD,CAAF,CAAlB;AAAA,SAlBN;AAmBb,QAAA,kBAAkB,EAAE,EAnBP;AAoBb,QAAA,OAAO,EAAE,IApBI;AAqBb,QAAA,UAAU,EAAE,sBAAI,CAAE;AArBL,QA3CjB;AAAA,MADF,EAqEGnB,iBAAiB,iBAChB,MAAC,YAAD;AAAc,MAAA,SAAS,EAAEE,IAAI,IAAI,EAAjC;AAAA,8BACE,KAAC,gBAAD;AAAkB,QAAA,KAAK,EAAE5B,MAAM,CAAC+D,YAAhC;AAA8C,QAAA,SAAS,EAAEnC,IAAI,IAAI;AAAjE,QADF,eAEE;AAAA,kBAAOF;AAAP,QAFF;AAAA,MAtEJ;AAAA,IADF;AA8ED,CA5HD;;;AA/BER,EAAAA,E;AACAC,EAAAA,U;AACAC,EAAAA,a;AACAC,EAAAA,W;AACAC,EAAAA,Y;AACAC,EAAAA,W;AACAC,EAAAA,kB;AACAC,EAAAA,Q;AACAC,EAAAA,iB;AACAC,EAAAA,S;AAEAE,EAAAA,M;AACAC,EAAAA,Y;AACAC,EAAAA,kB;AACAC,EAAAA,mB;AACAC,EAAAA,qB,aAAwB,S,EAAY,W,EAAc,U;AAClDC,EAAAA,oB;AACAC,EAAAA,U;AACAC,EAAAA,e;AACAC,EAAAA,kB;;AA0IF,eAAepB,SAAf","sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {Search as SearchIcon, Clear as ClearIcon, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\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 = '4px 0',\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              <SearchIcon size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n\n      {showDropdown && <DropdownContent id={'search'}\n                                        containerRef={containerRef}\n          size={size}\n          isButton={false}\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          <TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"file":"SearchBar.js"}

package/dist/InputFields/TextField.cjs

@@ -35,9 +35,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var id = _ref.id,

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","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 {CheckMark, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {Size, States} from '../types';\nimport {ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\n\ntype TextFieldProps =\n  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 = '4px 0',\n                                      note,\n                                      className,\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          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        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <CheckMark color={COLORS.correct_400}/> :\n              <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,"sources":["../../src/InputFields/TextField.tsx"],"names":["TextField","React","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","rest","elementRef","useImperativeHandle","current","cls","States","Invalid","e","preventDefault","undefined","target","Valid","COLORS","correct_400","critical_400","icon","message"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {CheckMark, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {Size, States} from '../types';\nimport {ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\n\ntype TextFieldProps =\n  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 = '4px 0',\n                                      note,\n                                      className,\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          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        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <CheckMark color={COLORS.correct_400}/> :\n              <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"],"file":"TextField.cjs"}

package/dist/InputFields/TextField.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Size, States } from '../types';
 import { TextFieldNote } from './types';
-declare const TextField: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "pattern" | "type" | "id" | "onChange" | "disabled" | "value" | "autoComplete" | "maxLength" | "readOnly" | "size"> & {
+declare const TextField: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "pattern" | "type" | "id" | "onChange" | "size" | "disabled" | "value" | "autoComplete" | "maxLength" | "readOnly"> & {
     id?: string | undefined;
     disabled?: boolean | undefined;
     readOnly?: boolean | undefined;

package/dist/InputFields/TextField.js

@@ -3,9 +3,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _pt from "prop-types";
 var _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "withoutBorder", "state", "size", "margin", "note", "className"];
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import * as React from 'react';
 import { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';

package/dist/InputFields/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":["React","CheckMark","TechnicalWarning","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TextField","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","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 {CheckMark, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {Size, States} from '../types';\nimport {ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\n\ntype TextFieldProps =\n  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 = '4px 0',\n                                      note,\n                                      className,\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          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        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <CheckMark color={COLORS.correct_400}/> :\n              <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,"sources":["../../src/InputFields/TextField.tsx"],"names":["React","CheckMark","TechnicalWarning","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TextField","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","rest","elementRef","useImperativeHandle","current","cls","Invalid","e","preventDefault","undefined","target","Valid","correct_400","critical_400","icon","message"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {CheckMark, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {Size, States} from '../types';\nimport {ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\n\ntype TextFieldProps =\n  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 = '4px 0',\n                                      note,\n                                      className,\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          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        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <CheckMark color={COLORS.correct_400}/> :\n              <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"],"file":"TextField.js"}

package/dist/InputFields/Textarea.cjs

@@ -37,9 +37,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 // Add component-specific styles.
 var TextareaWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  ", "\n"])), function (props) {

package/dist/InputFields/Textarea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.cjs","names":["TextareaWrapper","styled","div","props","margin","TextArea","textarea","COLORS","neutral_400","white","autoHeight","ComponentMStyling","ComponentTextStyle","Italic","black","ComponentSStyling","neutral_500","primary_700","primary_800","critical_500","correct_500","neutral_100","neutral_300","Textarea","React","forwardRef","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","className","rest","cls","States","Invalid","undefined","e","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/Textarea.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentSStyling } from '../styles';\nimport { ErrorMessage, NoteMessage, ValidationMessage } from './styling';\nimport { Size, States } from '../types';\n\n/**\n * Import custom components.\n */\nimport { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\nimport { TextareaProps, TextFieldNote } from './types';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea<{ autoHeight?: boolean }>`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 4px 0px;\n  padding: 16px;\n\n  resize: ${(props) => (props.autoHeight ? 'none' : '')};\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 304px;\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 3px -1px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\n    margin: 3px -1px;\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus,\n  &.invalid:active {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  &.valid {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 4px 0px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n`;\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({\n  id,\n  placeholder,\n  state,\n  value,\n  size,\n  disabled,\n  validationMessage,\n  onChange,\n  margin,\n  autoHeight,\n  note,\n  required,\n  className,\n  ...rest\n}: TextareaProps, ref) => {\n\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        ref={ref}\n        value={value}\n        placeholder={disabled ? undefined : placeholder}\n        autoHeight={autoHeight}\n        className={cls}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n        required={required}\n        {...rest}\n      />\n      {validationMessage && (\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n          {state === States.Valid ? <CheckMark color={COLORS.correct_400} /> : <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    </TextareaWrapper>\n  );\n});\n\nexport default Textarea;\n"],"mappings":"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"}
+{"version":3,"sources":["../../src/InputFields/Textarea.tsx"],"names":["TextareaWrapper","styled","div","props","margin","TextArea","textarea","COLORS","neutral_400","white","autoHeight","ComponentTextStyle","Italic","black","neutral_500","primary_700","primary_800","critical_500","correct_500","neutral_100","neutral_300","Textarea","React","forwardRef","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","className","rest","cls","States","Invalid","undefined","e","target","Valid","correct_400","critical_400","icon","message"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentSStyling } from '../styles';\nimport { ErrorMessage, NoteMessage, ValidationMessage } from './styling';\nimport { Size, States } from '../types';\n\n/**\n * Import custom components.\n */\nimport { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\nimport { TextareaProps, TextFieldNote } from './types';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea<{ autoHeight?: boolean }>`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 4px 0px;\n  padding: 16px;\n\n  resize: ${(props) => (props.autoHeight ? 'none' : '')};\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 304px;\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 3px -1px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\n    margin: 3px -1px;\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus,\n  &.invalid:active {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  &.valid {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 4px 0px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n`;\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({\n  id,\n  placeholder,\n  state,\n  value,\n  size,\n  disabled,\n  validationMessage,\n  onChange,\n  margin,\n  autoHeight,\n  note,\n  required,\n  className,\n  ...rest\n}: TextareaProps, ref) => {\n\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        ref={ref}\n        value={value}\n        placeholder={disabled ? undefined : placeholder}\n        autoHeight={autoHeight}\n        className={cls}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n        required={required}\n        {...rest}\n      />\n      {validationMessage && (\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n          {state === States.Valid ? <CheckMark color={COLORS.correct_400} /> : <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    </TextareaWrapper>\n  );\n});\n\nexport default Textarea;\n"],"file":"Textarea.cjs"}

package/dist/InputFields/Textarea.d.ts

@@ -4,7 +4,7 @@
 import * as React from 'react';
 import { Size } from '../types';
 import { TextFieldNote } from './types';
-declare const Textarea: React.ForwardRefExoticComponent<Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "placeholder" | "onChange" | "disabled" | "value" | "required"> & {
+declare const Textarea: React.ForwardRefExoticComponent<Omit<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, "placeholder" | "onChange" | "disabled" | "value" | "required"> & {
     id: string;
     placeholder: string;
     value?: string | undefined;

package/dist/InputFields/Textarea.js

@@ -5,9 +5,9 @@ var _excluded = ["id", "placeholder", "state", "value", "size", "disabled", "val
 
 var _templateObject, _templateObject2;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 /**
  * Import React libraries.

package/dist/InputFields/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":["React","COLORS","ComponentSStyling","NoteMessage","ValidationMessage","States","CheckMark","TechnicalWarning","styled","ComponentMStyling","ComponentTextStyle","TextareaWrapper","div","props","margin","TextArea","textarea","neutral_400","white","autoHeight","Italic","black","neutral_500","primary_700","primary_800","critical_500","correct_500","neutral_100","neutral_300","Textarea","forwardRef","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","className","rest","cls","Invalid","undefined","e","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/Textarea.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentSStyling } from '../styles';\nimport { ErrorMessage, NoteMessage, ValidationMessage } from './styling';\nimport { Size, States } from '../types';\n\n/**\n * Import custom components.\n */\nimport { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\nimport { TextareaProps, TextFieldNote } from './types';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea<{ autoHeight?: boolean }>`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 4px 0px;\n  padding: 16px;\n\n  resize: ${(props) => (props.autoHeight ? 'none' : '')};\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 304px;\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 3px -1px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\n    margin: 3px -1px;\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus,\n  &.invalid:active {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  &.valid {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 4px 0px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n`;\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({\n  id,\n  placeholder,\n  state,\n  value,\n  size,\n  disabled,\n  validationMessage,\n  onChange,\n  margin,\n  autoHeight,\n  note,\n  required,\n  className,\n  ...rest\n}: TextareaProps, ref) => {\n\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        ref={ref}\n        value={value}\n        placeholder={disabled ? undefined : placeholder}\n        autoHeight={autoHeight}\n        className={cls}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n        required={required}\n        {...rest}\n      />\n      {validationMessage && (\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n          {state === States.Valid ? <CheckMark color={COLORS.correct_400} /> : <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    </TextareaWrapper>\n  );\n});\n\nexport default Textarea;\n"],"mappings":"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"}
+{"version":3,"sources":["../../src/InputFields/Textarea.tsx"],"names":["React","COLORS","ComponentSStyling","NoteMessage","ValidationMessage","States","CheckMark","TechnicalWarning","styled","ComponentMStyling","ComponentTextStyle","TextareaWrapper","div","props","margin","TextArea","textarea","neutral_400","white","autoHeight","Italic","black","neutral_500","primary_700","primary_800","critical_500","correct_500","neutral_100","neutral_300","Textarea","forwardRef","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","className","rest","cls","Invalid","undefined","e","target","Valid","correct_400","critical_400","icon","message"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentSStyling } from '../styles';\nimport { ErrorMessage, NoteMessage, ValidationMessage } from './styling';\nimport { Size, States } from '../types';\n\n/**\n * Import custom components.\n */\nimport { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\nimport { TextareaProps, TextFieldNote } from './types';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea<{ autoHeight?: boolean }>`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 4px 0px;\n  padding: 16px;\n\n  resize: ${(props) => (props.autoHeight ? 'none' : '')};\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 304px;\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 3px -1px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\n    margin: 3px -1px;\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus,\n  &.invalid:active {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  &.valid {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 4px 0px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n`;\n\nconst Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({\n  id,\n  placeholder,\n  state,\n  value,\n  size,\n  disabled,\n  validationMessage,\n  onChange,\n  margin,\n  autoHeight,\n  note,\n  required,\n  className,\n  ...rest\n}: TextareaProps, ref) => {\n\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        ref={ref}\n        value={value}\n        placeholder={disabled ? undefined : placeholder}\n        autoHeight={autoHeight}\n        className={cls}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n        required={required}\n        {...rest}\n      />\n      {validationMessage && (\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n          {state === States.Valid ? <CheckMark color={COLORS.correct_400} /> : <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    </TextareaWrapper>\n  );\n});\n\nexport default Textarea;\n"],"file":"Textarea.js"}

package/dist/InputFields/components/SearchBarInput.cjs.map

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

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

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

package/dist/InputFields/components/SearchField.cjs

@@ -35,9 +35,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var SearchFieldWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &.focus-visible-within {\n    ", "\n  }\n"])), _index.focusStyles);
 

package/dist/InputFields/components/SearchField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.cjs","names":["SearchFieldWrapper","styled","div","focusStyles","StyledSearchField","COLORS","neutral_400","white","ComponentSStyling","ComponentTextStyle","Regular","black","Italic","neutral_500","BREAKPOINTS","MEDIUM","ComponentMStyling","primary_800","neutral_600","critical_400","neutral_100","SearchField","React","forwardRef","ref","id","searchTerm","disabled","validationMessage","children","size","className","rest","cls","concat"],"sources":["../../../src/InputFields/components/SearchField.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { Size } from '../../types';\n\nexport const SearchFieldWrapper = styled.div`\n  &.focus-visible-within {\n    ${focusStyles}\n  }\n`;\n\nexport const StyledSearchField = styled.div<{ activeValidationMessage?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ${COLORS.white};\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  div {\n    color: ${COLORS.neutral_600};\n    background-color: transparent;\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n`;\n\ntype SeachFieldProps = React.HTMLAttributes<HTMLDivElement> & {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  size?: Size.Small | Size.Medium;\n};\n\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({ id, searchTerm, disabled, validationMessage, children, size, className, ...rest }, ref) => {\n  const cls = (disabled ? 'disabled ' : '')\n    .concat(searchTerm !== '' ? 'searchactive ' : '')\n    .concat(size ? `${size} ` : '')\n    .concat(validationMessage ? ' invalid ' : '')\n    .concat(`${className ?? ''} `);\n\n  return (\n    <SearchFieldWrapper ref={ref}>\n      <StyledSearchField id={`${id}_main`} data-testid={`${id}_main`} className={cls} {...rest}>\n        {children}\n      </StyledSearchField>\n    </SearchFieldWrapper>\n  );\n});\n\nexport default SearchField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAGO,IAAMA,kBAAkB,GAAGC,yBAAA,CAAOC,GAAV,iIAEzBC,kBAFyB,CAAxB;;;;AAMA,IAAMC,iBAAiB,GAAGH,yBAAA,CAAOC,GAAV,4nCAGEG,aAAA,CAAOC,WAHT,EAURD,aAAA,CAAOE,KAVC,EAY1B,IAAAC,yBAAA,EAAkBC,yBAAA,CAAmBC,OAArC,EAA8CL,aAAA,CAAOM,KAArD,CAZ0B,EAkBxB,IAAAH,yBAAA,EAAkBC,yBAAA,CAAmBG,MAArC,EAA6CP,aAAA,CAAOQ,WAApD,CAlBwB,EAqB1BC,kBAAA,CAAYC,MArBc,EAsBxB,IAAAC,yBAAA,EAAkBP,yBAAA,CAAmBC,OAArC,EAA8CL,aAAA,CAAOM,KAArD,CAtBwB,EA4BtB,IAAAK,yBAAA,EAAkBP,yBAAA,CAAmBG,MAArC,EAA6CP,aAAA,CAAOQ,WAApD,CA5BsB,EAiCxB,IAAAL,yBAAA,EAAkBC,yBAAA,CAAmBC,OAArC,EAA8CL,aAAA,CAAOM,KAArD,CAjCwB,EAsCtB,IAAAH,yBAAA,EAAkBC,yBAAA,CAAmBG,MAArC,EAA6CP,aAAA,CAAOQ,WAApD,CAtCsB,EA2CxB,IAAAG,yBAAA,EAAkBP,yBAAA,CAAmBC,OAArC,EAA8CL,aAAA,CAAOM,KAArD,CA3CwB,EA+CtB,IAAAK,yBAAA,EAAkBP,yBAAA,CAAmBG,MAArC,EAA6CP,aAAA,CAAOQ,WAApD,CA/CsB,EAoDIR,aAAA,CAAOY,WApDX,EAwDIZ,aAAA,CAAOY,WAxDX,EA4DjBZ,aAAA,CAAOa,WA5DU,EAiEIb,aAAA,CAAOc,YAjEX,EAqEId,aAAA,CAAOe,WArEX,CAAvB;;;AAoFP,IAAMC,WAAW,gBAAGC,KAAK,CAACC,UAAN,CAAkD,gBAAsFC,GAAtF,EAA8F;EAAA,IAA3FC,EAA2F,QAA3FA,EAA2F;EAAA,IAAvFC,UAAuF,QAAvFA,UAAuF;EAAA,IAA3EC,QAA2E,QAA3EA,QAA2E;EAAA,IAAjEC,iBAAiE,QAAjEA,iBAAiE;EAAA,IAA9CC,QAA8C,QAA9CA,QAA8C;EAAA,IAApCC,IAAoC,QAApCA,IAAoC;EAAA,IAA9BC,SAA8B,QAA9BA,SAA8B;EAAA,IAAhBC,IAAgB;EAClK,IAAMC,GAAG,GAAG,CAACN,QAAQ,GAAG,WAAH,GAAiB,EAA1B,EACTO,MADS,CACFR,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EADpC,EAETQ,MAFS,CAEFJ,IAAI,aAAMA,IAAN,SAAgB,EAFlB,EAGTI,MAHS,CAGFN,iBAAiB,GAAG,WAAH,GAAiB,EAHhC,EAITM,MAJS,WAICH,SAJD,aAICA,SAJD,cAICA,SAJD,GAIc,EAJd,OAAZ;EAMA,oBACE,qBAAC,kBAAD;IAAoB,GAAG,EAAEP,GAAzB;IAAA,uBACE,qBAAC,iBAAD;MAAmB,EAAE,YAAKC,EAAL,UAArB;MAAqC,yBAAgBA,EAAhB,UAArC;MAAgE,SAAS,EAAEQ;IAA3E,GAAoFD,IAApF;MAAA,UACGH;IADH;EADF,EADF;AAOD,CAdmB,CAApB;;EAREJ,E;EACAC,U;EACAC,Q;EACAC,iB;EACAC,Q;;eAoBaR,W"}
+{"version":3,"sources":["../../../src/InputFields/components/SearchField.tsx"],"names":["SearchFieldWrapper","styled","div","focusStyles","StyledSearchField","COLORS","neutral_400","white","ComponentTextStyle","Regular","black","Italic","neutral_500","BREAKPOINTS","MEDIUM","primary_800","neutral_600","critical_400","neutral_100","SearchField","React","forwardRef","ref","id","searchTerm","disabled","validationMessage","children","size","className","rest","cls","concat"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAGO,IAAMA,kBAAkB,GAAGC,0BAAOC,GAAV,iIAEzBC,kBAFyB,CAAxB;;;;AAMA,IAAMC,iBAAiB,GAAGH,0BAAOC,GAAV,4nCAGEG,cAAOC,WAHT,EAURD,cAAOE,KAVC,EAY1B,+BAAkBC,0BAAmBC,OAArC,EAA8CJ,cAAOK,KAArD,CAZ0B,EAkBxB,+BAAkBF,0BAAmBG,MAArC,EAA6CN,cAAOO,WAApD,CAlBwB,EAqB1BC,mBAAYC,MArBc,EAsBxB,+BAAkBN,0BAAmBC,OAArC,EAA8CJ,cAAOK,KAArD,CAtBwB,EA4BtB,+BAAkBF,0BAAmBG,MAArC,EAA6CN,cAAOO,WAApD,CA5BsB,EAiCxB,+BAAkBJ,0BAAmBC,OAArC,EAA8CJ,cAAOK,KAArD,CAjCwB,EAsCtB,+BAAkBF,0BAAmBG,MAArC,EAA6CN,cAAOO,WAApD,CAtCsB,EA2CxB,+BAAkBJ,0BAAmBC,OAArC,EAA8CJ,cAAOK,KAArD,CA3CwB,EA+CtB,+BAAkBF,0BAAmBG,MAArC,EAA6CN,cAAOO,WAApD,CA/CsB,EAoDIP,cAAOU,WApDX,EAwDIV,cAAOU,WAxDX,EA4DjBV,cAAOW,WA5DU,EAiEIX,cAAOY,YAjEX,EAqEIZ,cAAOa,WArEX,CAAvB;;;AAoFP,IAAMC,WAAW,gBAAGC,KAAK,CAACC,UAAN,CAAkD,gBAAsFC,GAAtF,EAA8F;AAAA,MAA3FC,EAA2F,QAA3FA,EAA2F;AAAA,MAAvFC,UAAuF,QAAvFA,UAAuF;AAAA,MAA3EC,QAA2E,QAA3EA,QAA2E;AAAA,MAAjEC,iBAAiE,QAAjEA,iBAAiE;AAAA,MAA9CC,QAA8C,QAA9CA,QAA8C;AAAA,MAApCC,IAAoC,QAApCA,IAAoC;AAAA,MAA9BC,SAA8B,QAA9BA,SAA8B;AAAA,MAAhBC,IAAgB;AAClK,MAAMC,GAAG,GAAG,CAACN,QAAQ,GAAG,WAAH,GAAiB,EAA1B,EACTO,MADS,CACFR,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EADpC,EAETQ,MAFS,CAEFJ,IAAI,aAAMA,IAAN,SAAgB,EAFlB,EAGTI,MAHS,CAGFN,iBAAiB,GAAG,WAAH,GAAiB,EAHhC,EAITM,MAJS,WAICH,SAJD,aAICA,SAJD,cAICA,SAJD,GAIc,EAJd,OAAZ;AAMA,sBACE,qBAAC,kBAAD;AAAoB,IAAA,GAAG,EAAEP,GAAzB;AAAA,2BACE,qBAAC,iBAAD;AAAmB,MAAA,EAAE,YAAKC,EAAL,UAArB;AAAqC,+BAAgBA,EAAhB,UAArC;AAAgE,MAAA,SAAS,EAAEQ;AAA3E,OAAoFD,IAApF;AAAA,gBACGH;AADH;AADF,IADF;AAOD,CAdmB,CAApB;;AAREJ,EAAAA,E;AACAC,EAAAA,U;AACAC,EAAAA,Q;AACAC,EAAAA,iB;AACAC,EAAAA,Q;;eAoBaR,W","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { Size } from '../../types';\n\nexport const SearchFieldWrapper = styled.div`\n  &.focus-visible-within {\n    ${focusStyles}\n  }\n`;\n\nexport const StyledSearchField = styled.div<{ activeValidationMessage?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ${COLORS.white};\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  div {\n    color: ${COLORS.neutral_600};\n    background-color: transparent;\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n`;\n\ntype SeachFieldProps = React.HTMLAttributes<HTMLDivElement> & {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  size?: Size.Small | Size.Medium;\n};\n\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({ id, searchTerm, disabled, validationMessage, children, size, className, ...rest }, ref) => {\n  const cls = (disabled ? 'disabled ' : '')\n    .concat(searchTerm !== '' ? 'searchactive ' : '')\n    .concat(size ? `${size} ` : '')\n    .concat(validationMessage ? ' invalid ' : '')\n    .concat(`${className ?? ''} `);\n\n  return (\n    <SearchFieldWrapper ref={ref}>\n      <StyledSearchField id={`${id}_main`} data-testid={`${id}_main`} className={cls} {...rest}>\n        {children}\n      </StyledSearchField>\n    </SearchFieldWrapper>\n  );\n});\n\nexport default SearchField;\n"],"file":"SearchField.cjs"}

package/dist/InputFields/components/SearchField.js

@@ -6,9 +6,9 @@ var _excluded = ["id", "searchTerm", "disabled", "validationMessage", "children"
 
 var _templateObject, _templateObject2;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import * as React from 'react';
 import styled from 'styled-components';

package/dist/InputFields/components/SearchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","SearchFieldWrapper","div","StyledSearchField","neutral_400","white","Regular","black","Italic","neutral_500","MEDIUM","primary_800","neutral_600","critical_400","neutral_100","SearchField","forwardRef","ref","id","searchTerm","disabled","validationMessage","children","size","className","rest","cls","concat"],"sources":["../../../src/InputFields/components/SearchField.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { Size } from '../../types';\n\nexport const SearchFieldWrapper = styled.div`\n  &.focus-visible-within {\n    ${focusStyles}\n  }\n`;\n\nexport const StyledSearchField = styled.div<{ activeValidationMessage?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ${COLORS.white};\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  div {\n    color: ${COLORS.neutral_600};\n    background-color: transparent;\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n`;\n\ntype SeachFieldProps = React.HTMLAttributes<HTMLDivElement> & {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  size?: Size.Small | Size.Medium;\n};\n\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({ id, searchTerm, disabled, validationMessage, children, size, className, ...rest }, ref) => {\n  const cls = (disabled ? 'disabled ' : '')\n    .concat(searchTerm !== '' ? 'searchactive ' : '')\n    .concat(size ? `${size} ` : '')\n    .concat(validationMessage ? ' invalid ' : '')\n    .concat(`${className ?? ''} `);\n\n  return (\n    <SearchFieldWrapper ref={ref}>\n      <StyledSearchField id={`${id}_main`} data-testid={`${id}_main`} className={cls} {...rest}>\n        {children}\n      </StyledSearchField>\n    </SearchFieldWrapper>\n  );\n});\n\nexport default SearchField;\n"],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,WAAT,EAAsBC,MAAtB,EAA8BC,kBAA9B,EAAkDC,WAAlD,QAAqE,oBAArE;AACA,SAASC,iBAAT,EAA4BC,iBAA5B,QAAqD,cAArD;;AAGA,OAAO,IAAMC,kBAAkB,GAAGP,MAAM,CAACQ,GAAV,mHAEzBJ,WAFyB,CAAxB;AAMP,OAAO,IAAMK,iBAAiB,GAAGT,MAAM,CAACQ,GAAV,8mCAGEN,MAAM,CAACQ,WAHT,EAURR,MAAM,CAACS,KAVC,EAY1BL,iBAAiB,CAACH,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAZS,EAkBxBP,iBAAiB,CAACH,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CAlBO,EAqB1Bd,WAAW,CAACe,MArBc,EAsBxBX,iBAAiB,CAACF,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAtBO,EA4BtBR,iBAAiB,CAACF,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CA5BK,EAiCxBT,iBAAiB,CAACH,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAjCO,EAsCtBP,iBAAiB,CAACH,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CAtCK,EA2CxBV,iBAAiB,CAACF,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CA3CO,EA+CtBR,iBAAiB,CAACF,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CA/CK,EAoDIb,MAAM,CAACe,WApDX,EAwDIf,MAAM,CAACe,WAxDX,EA4DjBf,MAAM,CAACgB,WA5DU,EAiEIhB,MAAM,CAACiB,YAjEX,EAqEIjB,MAAM,CAACkB,WArEX,CAAvB;AAoFP,IAAMC,WAAW,gBAAGtB,KAAK,CAACuB,UAAN,CAAkD,gBAAsFC,GAAtF,EAA8F;EAAA,IAA3FC,EAA2F,QAA3FA,EAA2F;EAAA,IAAvFC,UAAuF,QAAvFA,UAAuF;EAAA,IAA3EC,QAA2E,QAA3EA,QAA2E;EAAA,IAAjEC,iBAAiE,QAAjEA,iBAAiE;EAAA,IAA9CC,QAA8C,QAA9CA,QAA8C;EAAA,IAApCC,IAAoC,QAApCA,IAAoC;EAAA,IAA9BC,SAA8B,QAA9BA,SAA8B;EAAA,IAAhBC,IAAgB;;EAClK,IAAMC,GAAG,GAAG,CAACN,QAAQ,GAAG,WAAH,GAAiB,EAA1B,EACTO,MADS,CACFR,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EADpC,EAETQ,MAFS,CAEFJ,IAAI,aAAMA,IAAN,SAAgB,EAFlB,EAGTI,MAHS,CAGFN,iBAAiB,GAAG,WAAH,GAAiB,EAHhC,EAITM,MAJS,WAICH,SAJD,aAICA,SAJD,cAICA,SAJD,GAIc,EAJd,OAAZ;EAMA,oBACE,KAAC,kBAAD;IAAoB,GAAG,EAAEP,GAAzB;IAAA,uBACE,KAAC,iBAAD;MAAmB,EAAE,YAAKC,EAAL,UAArB;MAAqC,yBAAgBA,EAAhB,UAArC;MAAgE,SAAS,EAAEQ;IAA3E,GAAoFD,IAApF;MAAA,UACGH;IADH;EADF,EADF;AAOD,CAdmB,CAApB;;EAREJ,E;EACAC,U;EACAC,Q;EACAC,iB;EACAC,Q;;AAoBF,eAAeP,WAAf"}
+{"version":3,"sources":["../../../src/InputFields/components/SearchField.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","SearchFieldWrapper","div","StyledSearchField","neutral_400","white","Regular","black","Italic","neutral_500","MEDIUM","primary_800","neutral_600","critical_400","neutral_100","SearchField","forwardRef","ref","id","searchTerm","disabled","validationMessage","children","size","className","rest","cls","concat"],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,WAAT,EAAsBC,MAAtB,EAA8BC,kBAA9B,EAAkDC,WAAlD,QAAqE,oBAArE;AACA,SAASC,iBAAT,EAA4BC,iBAA5B,QAAqD,cAArD;;AAGA,OAAO,IAAMC,kBAAkB,GAAGP,MAAM,CAACQ,GAAV,mHAEzBJ,WAFyB,CAAxB;AAMP,OAAO,IAAMK,iBAAiB,GAAGT,MAAM,CAACQ,GAAV,8mCAGEN,MAAM,CAACQ,WAHT,EAURR,MAAM,CAACS,KAVC,EAY1BL,iBAAiB,CAACH,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAZS,EAkBxBP,iBAAiB,CAACH,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CAlBO,EAqB1Bd,WAAW,CAACe,MArBc,EAsBxBX,iBAAiB,CAACF,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAtBO,EA4BtBR,iBAAiB,CAACF,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CA5BK,EAiCxBT,iBAAiB,CAACH,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAjCO,EAsCtBP,iBAAiB,CAACH,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CAtCK,EA2CxBV,iBAAiB,CAACF,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CA3CO,EA+CtBR,iBAAiB,CAACF,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CA/CK,EAoDIb,MAAM,CAACe,WApDX,EAwDIf,MAAM,CAACe,WAxDX,EA4DjBf,MAAM,CAACgB,WA5DU,EAiEIhB,MAAM,CAACiB,YAjEX,EAqEIjB,MAAM,CAACkB,WArEX,CAAvB;AAoFP,IAAMC,WAAW,gBAAGtB,KAAK,CAACuB,UAAN,CAAkD,gBAAsFC,GAAtF,EAA8F;AAAA,MAA3FC,EAA2F,QAA3FA,EAA2F;AAAA,MAAvFC,UAAuF,QAAvFA,UAAuF;AAAA,MAA3EC,QAA2E,QAA3EA,QAA2E;AAAA,MAAjEC,iBAAiE,QAAjEA,iBAAiE;AAAA,MAA9CC,QAA8C,QAA9CA,QAA8C;AAAA,MAApCC,IAAoC,QAApCA,IAAoC;AAAA,MAA9BC,SAA8B,QAA9BA,SAA8B;AAAA,MAAhBC,IAAgB;;AAClK,MAAMC,GAAG,GAAG,CAACN,QAAQ,GAAG,WAAH,GAAiB,EAA1B,EACTO,MADS,CACFR,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EADpC,EAETQ,MAFS,CAEFJ,IAAI,aAAMA,IAAN,SAAgB,EAFlB,EAGTI,MAHS,CAGFN,iBAAiB,GAAG,WAAH,GAAiB,EAHhC,EAITM,MAJS,WAICH,SAJD,aAICA,SAJD,cAICA,SAJD,GAIc,EAJd,OAAZ;AAMA,sBACE,KAAC,kBAAD;AAAoB,IAAA,GAAG,EAAEP,GAAzB;AAAA,2BACE,KAAC,iBAAD;AAAmB,MAAA,EAAE,YAAKC,EAAL,UAArB;AAAqC,+BAAgBA,EAAhB,UAArC;AAAgE,MAAA,SAAS,EAAEQ;AAA3E,OAAoFD,IAApF;AAAA,gBACGH;AADH;AADF,IADF;AAOD,CAdmB,CAApB;;AAREJ,EAAAA,E;AACAC,EAAAA,U;AACAC,EAAAA,Q;AACAC,EAAAA,iB;AACAC,EAAAA,Q;;AAoBF,eAAeP,WAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { Size } from '../../types';\n\nexport const SearchFieldWrapper = styled.div`\n  &.focus-visible-within {\n    ${focusStyles}\n  }\n`;\n\nexport const StyledSearchField = styled.div<{ activeValidationMessage?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ${COLORS.white};\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  div {\n    color: ${COLORS.neutral_600};\n    background-color: transparent;\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n`;\n\ntype SeachFieldProps = React.HTMLAttributes<HTMLDivElement> & {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  size?: Size.Small | Size.Medium;\n};\n\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({ id, searchTerm, disabled, validationMessage, children, size, className, ...rest }, ref) => {\n  const cls = (disabled ? 'disabled ' : '')\n    .concat(searchTerm !== '' ? 'searchactive ' : '')\n    .concat(size ? `${size} ` : '')\n    .concat(validationMessage ? ' invalid ' : '')\n    .concat(`${className ?? ''} `);\n\n  return (\n    <SearchFieldWrapper ref={ref}>\n      <StyledSearchField id={`${id}_main`} data-testid={`${id}_main`} className={cls} {...rest}>\n        {children}\n      </StyledSearchField>\n    </SearchFieldWrapper>\n  );\n});\n\nexport default SearchField;\n"],"file":"SearchField.js"}

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,"sources":["../../src/InputFields/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","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"],"file":"index.cjs"}