@laerdal/life-react-components 6.0.0-dev.1.full → 6.0.0-dev.12.full

package/dist/InputFields/SearchBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.cjs","names":["_react","_interopRequireDefault","require","_index","_icons","_styling","_Button","_SearchBarInput","_SearchField","_styledComponents","_interopRequireWildcard","_Dropdown","_common","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ClearIconWrapper","styled","div","SearchBar","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","React","useRef","theme","useTheme","topLevelRef","isOpen","setIsOpen","useState","dropdownRef","useClickOutsideRef","isPressingEnter","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","jsxs","Fragment","children","InputWrapper","$disabled","ref","$margin","jsx","term","focusParentRefs","onClick","SearchIconWrapper","className","IconButton","variant","shape","action","onKeyPress","SystemIcons","Search","concat","Clear","DropdownContent","isButton","ariaRolesType","customizationProps","items","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","filter","selectedValues","setSelectedValues","messageOnNoResults","focused","setFocused","ErrorMessage","TechnicalWarning","color","COLORS","getColor","propTypes","_propTypes","string","isRequired","func","bool","node","oneOf","array","_default","exports"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\r\nimport {COLORS} from '../styles/index';\r\nimport {SystemIcons} from '../icons';\r\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\r\nimport {IconButton} from '../Button';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField from './components/SearchField';\r\nimport {Size} from '../types';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { DropdownContent, DropdownItem } from '../Dropdown';\r\nimport { useClickOutsideRef } from '../common';\r\n\r\nexport type SearchBarProps = {\r\n  /**\r\n   * Required. The ID of the search bar.\r\n   */\r\n  id: string;\r\n\r\n  /**\r\n   * Optional. The current search term in the search bar.\r\n   */\r\n  searchTerm?: string;\r\n  /**\r\n   * Required. A function to be called when the search term changes.\r\n   * It should take a string representing the new search term.\r\n   */\r\n  setSearchTerm: (term: string) => void;\r\n  /**\r\n   * Required. A function to be called when the enter key is pressed in the search bar.\r\n   * It should take an event object as a parameter.\r\n   */\r\n  enterSearch: (e: any) => void;\r\n  /**\r\n   * Required. A function to be called when the search term is removed.\r\n   * It should take an event object as a parameter.\r\n   */\r\n  removeSearch: (e: any) => void;\r\n  /**\r\n   * Optional. The placeholder text to be displayed in the search bar when it is empty.\r\n   */\r\n  placeholder?: string;\r\n  /**\r\n   * Optional. The label for the search button in the search bar.\r\n   */\r\n  performSearchLabel?: string;\r\n  /**\r\n   * Optional. A boolean indicating whether the search bar is disabled.\r\n   */\r\n  disabled?: boolean;\r\n  /**\r\n   * Optional. The validation message to be displayed when the search bar is in an error state.\r\n   */\r\n  validationMessage?: string;\r\n  /**\r\n   * Optional. A function to be called when a keydown event occurs in the search bar.\r\n   */\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  /**\r\n   * Optional. The size of the search bar. Can be 'Small' or 'Medium'.\r\n   */\r\n  size?: Size.Small | Size.Medium;\r\n  /**\r\n   * Optional. The margin of the search bar. Can be any valid CSS margin value.\r\n   */\r\n  margin?: string;\r\n  /**\r\n   * Optional. A boolean indicating whether the dropdown in the search bar should be shown.\r\n   */\r\n  showDropdown?: boolean;\r\n  /**\r\n   * Optional. The icon for the dropdown button in the search bar.\r\n   */\r\n  dropdownButtonIcon?: React.ReactNode;\r\n  /**\r\n   * Optional. The label for the dropdown button in the search bar.\r\n   */  \r\n  dropdownButtonLabel?: string;\r\n  /**\r\n   * Optional. The variant of the dropdown button in the search bar. Can be 'primary', 'secondary', or 'tertiary'.\r\n   */  \r\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\r\n  /**\r\n   * Optional. A function to be called when the dropdown button in the search bar is clicked.\r\n   */  \r\n  dropdownButtonAction?: () => boolean | void | undefined;\r\n  /**\r\n   * Optional. An array of DropdownItem objects representing the items in the dropdown.\r\n   */\r\n  searchList?: DropdownItem[];\r\n  /**\r\n   * Optional. A function to be called when an item is added to the dropdown.\r\n   * It should take a DropdownItem object as a parameter.\r\n   */\r\n  addToSearchList?: (e: DropdownItem) => void;\r\n  /**\r\n   * Optional. A boolean indicating whether the dropdown in the search bar is scrollable.\r\n   */\r\n  dropdownScrollable?: boolean;\r\n};\r\n\r\nconst ClearIconWrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  &.hidden {\r\n    display: none !important;\r\n  }\r\n`;\r\n\r\nconst SearchBar: React.FunctionComponent<SearchBarProps> = ({\r\n                                                             id,\r\n                                                             searchTerm,\r\n                                                             setSearchTerm,\r\n                                                             enterSearch,\r\n                                                             removeSearch,\r\n                                                             placeholder,\r\n                                                             performSearchLabel,\r\n                                                             disabled,\r\n                                                             validationMessage,\r\n                                                             onKeyDown,\r\n                                                             size,\r\n                                                             margin,\r\n                                                             showDropdown,\r\n                                                             dropdownButtonIcon,\r\n                                                             dropdownButtonLabel,\r\n                                                             dropdownButtonVariant,\r\n                                                             dropdownButtonAction,\r\n                                                             searchList=[],\r\n                                                             addToSearchList,\r\n                                                             dropdownScrollable\r\n                                                           }) => {\r\n  const containerRef = React.useRef<any>(null);\r\n  const theme = useTheme();\r\n  const topLevelRef = React.useRef<any>(null);\r\n\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef, topLevelRef]);\r\n\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  const enteredSearchTerm = (e: any) => {\r\n    addToSearchList && addToSearchList({value:e.target.value});\r\n    enterSearch(e);\r\n  }\r\n\r\n  const dropdownAction = () => {\r\n    if(dropdownButtonAction)\r\n      dropdownButtonAction();    \r\n  }\r\n\r\n  return (\r\n    <>\r\n      <InputWrapper\r\n        $disabled={disabled}\r\n        ref={topLevelRef}\r\n        $margin={margin}>\r\n        <SearchField id={'id'} size={size}\r\n                     ref={containerRef}\r\n                     searchTerm={searchTerm}\r\n                     disabled={disabled}\r\n                     validationMessage={validationMessage}>\r\n          <SearchBarInput\r\n            placeholder={disabled ? '' : placeholder}\r\n            id={id}\r\n            size={size}\r\n            disabled={disabled}\r\n            setSearchTerm={(term: string) => setSearchTerm(term)}\r\n            searchTerm={searchTerm}\r\n            onKeyDown={onKeyDown}\r\n            enterSearch={enteredSearchTerm}\r\n            focusParentRefs={[containerRef]}\r\n            onClick={()=>setIsOpen(!isOpen)}\r\n            ref={dropdownRef}\r\n          />\r\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\r\n            <IconButton id={`${id}_Search`}\r\n                        variant=\"secondary\"\r\n                        shape=\"circular\"\r\n                        action={enterSearch}\r\n                        disabled={disabled}\r\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\r\n              <SystemIcons.Search size=\"24px\"/>\r\n            </IconButton>\r\n          </SearchIconWrapper>\r\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\r\n            <IconButton id={`${id}_Clear`}\r\n                        variant=\"secondary\"\r\n                        shape=\"circular\"\r\n                        action={removeSearch}\r\n                        disabled={disabled}\r\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\r\n              <SystemIcons.Clear size=\"24px\"/>\r\n            </IconButton>\r\n          </ClearIconWrapper>\r\n        </SearchField>\r\n\r\n      {showDropdown && <DropdownContent id={'search'}\r\n                                        containerRef={containerRef}\r\n          size={size}\r\n          isButton={false}\r\n          ariaRolesType=\"input\"\r\n          customizationProps={{\r\n            items:searchList,\r\n            action: dropdownAction,\r\n            actionLabel: dropdownButtonLabel,\r\n            actionIcon: dropdownButtonIcon,\r\n            actionVariant: dropdownButtonVariant,\r\n            onValueUpdate:(e)=>{},\r\n            scrollable: dropdownScrollable,\r\n            pinTopItem: true\r\n          }}\r\n          isOpen={isOpen}\r\n          setIsOpen={setIsOpen}\r\n          filter={''}\r\n          selectedValues={searchTerm ? [searchTerm] : []}\r\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\r\n          messageOnNoResults={''}\r\n          focused={null}\r\n          setFocused={()=>{}}\r\n        />}\r\n\r\n      </InputWrapper>\r\n      {validationMessage && (\r\n        <ErrorMessage className={size || ''}>\r\n          <SystemIcons.TechnicalWarning color={COLORS.getColor('critical_400', theme)} className={size || ''}/>\r\n          <span>{validationMessage}</span>\r\n        </ErrorMessage>\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default SearchBar;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchBar.cjs","names":["_react","_interopRequireDefault","require","_index","_icons","_styling","_Button","_SearchBarInput","_SearchField","_styledComponents","_interopRequireWildcard","_Dropdown","_common","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ClearIconWrapper","styled","div","SearchBar","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","React","useRef","theme","useTheme","topLevelRef","isOpen","setIsOpen","useState","dropdownRef","useClickOutsideRef","isPressingEnter","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","jsxs","Fragment","children","InputWrapper","$disabled","ref","$margin","jsx","term","focusParentRefs","onClick","SearchIconWrapper","className","IconButton","variant","shape","action","onKeyPress","SystemIcons","Search","concat","Clear","DropdownContent","isButton","ariaRolesType","customizationProps","items","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","filter","selectedValues","setSelectedValues","messageOnNoResults","focused","setFocused","ErrorMessage","TechnicalWarning","color","COLORS","generateToken","componentType","defaultVariant","propTypes","_propTypes","string","isRequired","func","bool","node","oneOf","array","_default","exports"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\r\nimport {COLORS} from '../styles/index';\r\nimport {SystemIcons} from '../icons';\r\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\r\nimport {IconButton} from '../Button';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField from './components/SearchField';\r\nimport {Size} from '../types';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { DropdownContent, DropdownItem } from '../Dropdown';\r\nimport { useClickOutsideRef } from '../common';\r\n\r\nexport type SearchBarProps = {\r\n  /**\r\n   * Required. The ID of the search bar.\r\n   */\r\n  id: string;\r\n\r\n  /**\r\n   * Optional. The current search term in the search bar.\r\n   */\r\n  searchTerm?: string;\r\n  /**\r\n   * Required. A function to be called when the search term changes.\r\n   * It should take a string representing the new search term.\r\n   */\r\n  setSearchTerm: (term: string) => void;\r\n  /**\r\n   * Required. A function to be called when the enter key is pressed in the search bar.\r\n   * It should take an event object as a parameter.\r\n   */\r\n  enterSearch: (e: any) => void;\r\n  /**\r\n   * Required. A function to be called when the search term is removed.\r\n   * It should take an event object as a parameter.\r\n   */\r\n  removeSearch: (e: any) => void;\r\n  /**\r\n   * Optional. The placeholder text to be displayed in the search bar when it is empty.\r\n   */\r\n  placeholder?: string;\r\n  /**\r\n   * Optional. The label for the search button in the search bar.\r\n   */\r\n  performSearchLabel?: string;\r\n  /**\r\n   * Optional. A boolean indicating whether the search bar is disabled.\r\n   */\r\n  disabled?: boolean;\r\n  /**\r\n   * Optional. The validation message to be displayed when the search bar is in an error state.\r\n   */\r\n  validationMessage?: string;\r\n  /**\r\n   * Optional. A function to be called when a keydown event occurs in the search bar.\r\n   */\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  /**\r\n   * Optional. The size of the search bar. Can be 'Small' or 'Medium'.\r\n   */\r\n  size?: Size.Small | Size.Medium;\r\n  /**\r\n   * Optional. The margin of the search bar. Can be any valid CSS margin value.\r\n   */\r\n  margin?: string;\r\n  /**\r\n   * Optional. A boolean indicating whether the dropdown in the search bar should be shown.\r\n   */\r\n  showDropdown?: boolean;\r\n  /**\r\n   * Optional. The icon for the dropdown button in the search bar.\r\n   */\r\n  dropdownButtonIcon?: React.ReactNode;\r\n  /**\r\n   * Optional. The label for the dropdown button in the search bar.\r\n   */  \r\n  dropdownButtonLabel?: string;\r\n  /**\r\n   * Optional. The variant of the dropdown button in the search bar. Can be 'primary', 'secondary', or 'tertiary'.\r\n   */  \r\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\r\n  /**\r\n   * Optional. A function to be called when the dropdown button in the search bar is clicked.\r\n   */  \r\n  dropdownButtonAction?: () => boolean | void | undefined;\r\n  /**\r\n   * Optional. An array of DropdownItem objects representing the items in the dropdown.\r\n   */\r\n  searchList?: DropdownItem[];\r\n  /**\r\n   * Optional. A function to be called when an item is added to the dropdown.\r\n   * It should take a DropdownItem object as a parameter.\r\n   */\r\n  addToSearchList?: (e: DropdownItem) => void;\r\n  /**\r\n   * Optional. A boolean indicating whether the dropdown in the search bar is scrollable.\r\n   */\r\n  dropdownScrollable?: boolean;\r\n};\r\n\r\nconst ClearIconWrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  &.hidden {\r\n    display: none !important;\r\n  }\r\n`;\r\n\r\nconst SearchBar: React.FunctionComponent<SearchBarProps> = ({\r\n                                                             id,\r\n                                                             searchTerm,\r\n                                                             setSearchTerm,\r\n                                                             enterSearch,\r\n                                                             removeSearch,\r\n                                                             placeholder,\r\n                                                             performSearchLabel,\r\n                                                             disabled,\r\n                                                             validationMessage,\r\n                                                             onKeyDown,\r\n                                                             size,\r\n                                                             margin,\r\n                                                             showDropdown,\r\n                                                             dropdownButtonIcon,\r\n                                                             dropdownButtonLabel,\r\n                                                             dropdownButtonVariant,\r\n                                                             dropdownButtonAction,\r\n                                                             searchList=[],\r\n                                                             addToSearchList,\r\n                                                             dropdownScrollable\r\n                                                           }) => {\r\n  const containerRef = React.useRef<any>(null);\r\n  const theme = useTheme();\r\n  const topLevelRef = React.useRef<any>(null);\r\n\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef, topLevelRef]);\r\n\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  const enteredSearchTerm = (e: any) => {\r\n    addToSearchList && addToSearchList({value:e.target.value});\r\n    enterSearch(e);\r\n  }\r\n\r\n  const dropdownAction = () => {\r\n    if(dropdownButtonAction)\r\n      dropdownButtonAction();    \r\n  }\r\n\r\n  return (\r\n    <>\r\n      <InputWrapper\r\n        $disabled={disabled}\r\n        ref={topLevelRef}\r\n        $margin={margin}>\r\n        <SearchField id={'id'} size={size}\r\n                     ref={containerRef}\r\n                     searchTerm={searchTerm}\r\n                     disabled={disabled}\r\n                     validationMessage={validationMessage}>\r\n          <SearchBarInput\r\n            placeholder={disabled ? '' : placeholder}\r\n            id={id}\r\n            size={size}\r\n            disabled={disabled}\r\n            setSearchTerm={(term: string) => setSearchTerm(term)}\r\n            searchTerm={searchTerm}\r\n            onKeyDown={onKeyDown}\r\n            enterSearch={enteredSearchTerm}\r\n            focusParentRefs={[containerRef]}\r\n            onClick={()=>setIsOpen(!isOpen)}\r\n            ref={dropdownRef}\r\n          />\r\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\r\n            <IconButton id={`${id}_Search`}\r\n                        variant=\"secondary\"\r\n                        shape=\"circular\"\r\n                        action={enterSearch}\r\n                        disabled={disabled}\r\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\r\n              <SystemIcons.Search size=\"24px\"/>\r\n            </IconButton>\r\n          </SearchIconWrapper>\r\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\r\n            <IconButton id={`${id}_Clear`}\r\n                        variant=\"secondary\"\r\n                        shape=\"circular\"\r\n                        action={removeSearch}\r\n                        disabled={disabled}\r\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\r\n              <SystemIcons.Clear size=\"24px\"/>\r\n            </IconButton>\r\n          </ClearIconWrapper>\r\n        </SearchField>\r\n\r\n      {showDropdown && <DropdownContent id={'search'}\r\n                                        containerRef={containerRef}\r\n          size={size}\r\n          isButton={false}\r\n          ariaRolesType=\"input\"\r\n          customizationProps={{\r\n            items:searchList,\r\n            action: dropdownAction,\r\n            actionLabel: dropdownButtonLabel,\r\n            actionIcon: dropdownButtonIcon,\r\n            actionVariant: dropdownButtonVariant,\r\n            onValueUpdate:(e)=>{},\r\n            scrollable: dropdownScrollable,\r\n            pinTopItem: true\r\n          }}\r\n          isOpen={isOpen}\r\n          setIsOpen={setIsOpen}\r\n          filter={''}\r\n          selectedValues={searchTerm ? [searchTerm] : []}\r\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\r\n          messageOnNoResults={''}\r\n          focused={null}\r\n          setFocused={()=>{}}\r\n        />}\r\n\r\n      </InputWrapper>\r\n      {validationMessage && (\r\n        <ErrorMessage className={size || ''}>\r\n          <SystemIcons.TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)} className={size || ''}/>\r\n          <span>{validationMessage}</span>\r\n        </ErrorMessage>\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default SearchBar;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/SearchBar.js

@@ -143,7 +143,10 @@ const SearchBar = _ref => {
     }), validationMessage && /*#__PURE__*/_jsxs(ErrorMessage, {
       className: size || '',
       children: [/*#__PURE__*/_jsx(SystemIcons.TechnicalWarning, {
-        color: COLORS.getColor('critical_400', theme),
+        color: COLORS.generateToken({
+          componentType: 'text',
+          defaultVariant: 'critical'
+        }, theme),
         className: size || ''
       }), /*#__PURE__*/_jsx("span", {
         children: validationMessage

package/dist/InputFields/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","names":["React","COLORS","SystemIcons","ErrorMessage","InputWrapper","SearchIconWrapper","IconButton","SearchBarInput","SearchField","styled","useTheme","DropdownContent","useClickOutsideRef","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ClearIconWrapper","div","SearchBar","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","useRef","theme","topLevelRef","isOpen","setIsOpen","useState","dropdownRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","children","$disabled","ref","$margin","term","focusParentRefs","onClick","className","variant","shape","action","onKeyPress","Search","concat","Clear","isButton","ariaRolesType","customizationProps","items","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","filter","selectedValues","setSelectedValues","messageOnNoResults","focused","setFocused","TechnicalWarning","color","getColor","propTypes","_pt","string","isRequired","func","bool","node","oneOf","array"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\r\nimport {COLORS} from '../styles/index';\r\nimport {SystemIcons} from '../icons';\r\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\r\nimport {IconButton} from '../Button';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField from './components/SearchField';\r\nimport {Size} from '../types';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { DropdownContent, DropdownItem } from '../Dropdown';\r\nimport { useClickOutsideRef } from '../common';\r\n\r\nexport type SearchBarProps = {\r\n  /**\r\n   * Required. The ID of the search bar.\r\n   */\r\n  id: string;\r\n\r\n  /**\r\n   * Optional. The current search term in the search bar.\r\n   */\r\n  searchTerm?: string;\r\n  /**\r\n   * Required. A function to be called when the search term changes.\r\n   * It should take a string representing the new search term.\r\n   */\r\n  setSearchTerm: (term: string) => void;\r\n  /**\r\n   * Required. A function to be called when the enter key is pressed in the search bar.\r\n   * It should take an event object as a parameter.\r\n   */\r\n  enterSearch: (e: any) => void;\r\n  /**\r\n   * Required. A function to be called when the search term is removed.\r\n   * It should take an event object as a parameter.\r\n   */\r\n  removeSearch: (e: any) => void;\r\n  /**\r\n   * Optional. The placeholder text to be displayed in the search bar when it is empty.\r\n   */\r\n  placeholder?: string;\r\n  /**\r\n   * Optional. The label for the search button in the search bar.\r\n   */\r\n  performSearchLabel?: string;\r\n  /**\r\n   * Optional. A boolean indicating whether the search bar is disabled.\r\n   */\r\n  disabled?: boolean;\r\n  /**\r\n   * Optional. The validation message to be displayed when the search bar is in an error state.\r\n   */\r\n  validationMessage?: string;\r\n  /**\r\n   * Optional. A function to be called when a keydown event occurs in the search bar.\r\n   */\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  /**\r\n   * Optional. The size of the search bar. Can be 'Small' or 'Medium'.\r\n   */\r\n  size?: Size.Small | Size.Medium;\r\n  /**\r\n   * Optional. The margin of the search bar. Can be any valid CSS margin value.\r\n   */\r\n  margin?: string;\r\n  /**\r\n   * Optional. A boolean indicating whether the dropdown in the search bar should be shown.\r\n   */\r\n  showDropdown?: boolean;\r\n  /**\r\n   * Optional. The icon for the dropdown button in the search bar.\r\n   */\r\n  dropdownButtonIcon?: React.ReactNode;\r\n  /**\r\n   * Optional. The label for the dropdown button in the search bar.\r\n   */  \r\n  dropdownButtonLabel?: string;\r\n  /**\r\n   * Optional. The variant of the dropdown button in the search bar. Can be 'primary', 'secondary', or 'tertiary'.\r\n   */  \r\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\r\n  /**\r\n   * Optional. A function to be called when the dropdown button in the search bar is clicked.\r\n   */  \r\n  dropdownButtonAction?: () => boolean | void | undefined;\r\n  /**\r\n   * Optional. An array of DropdownItem objects representing the items in the dropdown.\r\n   */\r\n  searchList?: DropdownItem[];\r\n  /**\r\n   * Optional. A function to be called when an item is added to the dropdown.\r\n   * It should take a DropdownItem object as a parameter.\r\n   */\r\n  addToSearchList?: (e: DropdownItem) => void;\r\n  /**\r\n   * Optional. A boolean indicating whether the dropdown in the search bar is scrollable.\r\n   */\r\n  dropdownScrollable?: boolean;\r\n};\r\n\r\nconst ClearIconWrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  &.hidden {\r\n    display: none !important;\r\n  }\r\n`;\r\n\r\nconst SearchBar: React.FunctionComponent<SearchBarProps> = ({\r\n                                                             id,\r\n                                                             searchTerm,\r\n                                                             setSearchTerm,\r\n                                                             enterSearch,\r\n                                                             removeSearch,\r\n                                                             placeholder,\r\n                                                             performSearchLabel,\r\n                                                             disabled,\r\n                                                             validationMessage,\r\n                                                             onKeyDown,\r\n                                                             size,\r\n                                                             margin,\r\n                                                             showDropdown,\r\n                                                             dropdownButtonIcon,\r\n                                                             dropdownButtonLabel,\r\n                                                             dropdownButtonVariant,\r\n                                                             dropdownButtonAction,\r\n                                                             searchList=[],\r\n                                                             addToSearchList,\r\n                                                             dropdownScrollable\r\n                                                           }) => {\r\n  const containerRef = React.useRef<any>(null);\r\n  const theme = useTheme();\r\n  const topLevelRef = React.useRef<any>(null);\r\n\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef, topLevelRef]);\r\n\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  const enteredSearchTerm = (e: any) => {\r\n    addToSearchList && addToSearchList({value:e.target.value});\r\n    enterSearch(e);\r\n  }\r\n\r\n  const dropdownAction = () => {\r\n    if(dropdownButtonAction)\r\n      dropdownButtonAction();    \r\n  }\r\n\r\n  return (\r\n    <>\r\n      <InputWrapper\r\n        $disabled={disabled}\r\n        ref={topLevelRef}\r\n        $margin={margin}>\r\n        <SearchField id={'id'} size={size}\r\n                     ref={containerRef}\r\n                     searchTerm={searchTerm}\r\n                     disabled={disabled}\r\n                     validationMessage={validationMessage}>\r\n          <SearchBarInput\r\n            placeholder={disabled ? '' : placeholder}\r\n            id={id}\r\n            size={size}\r\n            disabled={disabled}\r\n            setSearchTerm={(term: string) => setSearchTerm(term)}\r\n            searchTerm={searchTerm}\r\n            onKeyDown={onKeyDown}\r\n            enterSearch={enteredSearchTerm}\r\n            focusParentRefs={[containerRef]}\r\n            onClick={()=>setIsOpen(!isOpen)}\r\n            ref={dropdownRef}\r\n          />\r\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\r\n            <IconButton id={`${id}_Search`}\r\n                        variant=\"secondary\"\r\n                        shape=\"circular\"\r\n                        action={enterSearch}\r\n                        disabled={disabled}\r\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\r\n              <SystemIcons.Search size=\"24px\"/>\r\n            </IconButton>\r\n          </SearchIconWrapper>\r\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\r\n            <IconButton id={`${id}_Clear`}\r\n                        variant=\"secondary\"\r\n                        shape=\"circular\"\r\n                        action={removeSearch}\r\n                        disabled={disabled}\r\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\r\n              <SystemIcons.Clear size=\"24px\"/>\r\n            </IconButton>\r\n          </ClearIconWrapper>\r\n        </SearchField>\r\n\r\n      {showDropdown && <DropdownContent id={'search'}\r\n                                        containerRef={containerRef}\r\n          size={size}\r\n          isButton={false}\r\n          ariaRolesType=\"input\"\r\n          customizationProps={{\r\n            items:searchList,\r\n            action: dropdownAction,\r\n            actionLabel: dropdownButtonLabel,\r\n            actionIcon: dropdownButtonIcon,\r\n            actionVariant: dropdownButtonVariant,\r\n            onValueUpdate:(e)=>{},\r\n            scrollable: dropdownScrollable,\r\n            pinTopItem: true\r\n          }}\r\n          isOpen={isOpen}\r\n          setIsOpen={setIsOpen}\r\n          filter={''}\r\n          selectedValues={searchTerm ? [searchTerm] : []}\r\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\r\n          messageOnNoResults={''}\r\n          focused={null}\r\n          setFocused={()=>{}}\r\n        />}\r\n\r\n      </InputWrapper>\r\n      {validationMessage && (\r\n        <ErrorMessage className={size || ''}>\r\n          <SystemIcons.TechnicalWarning color={COLORS.getColor('critical_400', theme)} className={size || ''}/>\r\n          <span>{validationMessage}</span>\r\n        </ErrorMessage>\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default SearchBar;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchBar.js","names":["React","COLORS","SystemIcons","ErrorMessage","InputWrapper","SearchIconWrapper","IconButton","SearchBarInput","SearchField","styled","useTheme","DropdownContent","useClickOutsideRef","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ClearIconWrapper","div","SearchBar","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","useRef","theme","topLevelRef","isOpen","setIsOpen","useState","dropdownRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","children","$disabled","ref","$margin","term","focusParentRefs","onClick","className","variant","shape","action","onKeyPress","Search","concat","Clear","isButton","ariaRolesType","customizationProps","items","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","filter","selectedValues","setSelectedValues","messageOnNoResults","focused","setFocused","TechnicalWarning","color","generateToken","componentType","defaultVariant","propTypes","_pt","string","isRequired","func","bool","node","oneOf","array"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\r\nimport {COLORS} from '../styles/index';\r\nimport {SystemIcons} from '../icons';\r\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\r\nimport {IconButton} from '../Button';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField from './components/SearchField';\r\nimport {Size} from '../types';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { DropdownContent, DropdownItem } from '../Dropdown';\r\nimport { useClickOutsideRef } from '../common';\r\n\r\nexport type SearchBarProps = {\r\n  /**\r\n   * Required. The ID of the search bar.\r\n   */\r\n  id: string;\r\n\r\n  /**\r\n   * Optional. The current search term in the search bar.\r\n   */\r\n  searchTerm?: string;\r\n  /**\r\n   * Required. A function to be called when the search term changes.\r\n   * It should take a string representing the new search term.\r\n   */\r\n  setSearchTerm: (term: string) => void;\r\n  /**\r\n   * Required. A function to be called when the enter key is pressed in the search bar.\r\n   * It should take an event object as a parameter.\r\n   */\r\n  enterSearch: (e: any) => void;\r\n  /**\r\n   * Required. A function to be called when the search term is removed.\r\n   * It should take an event object as a parameter.\r\n   */\r\n  removeSearch: (e: any) => void;\r\n  /**\r\n   * Optional. The placeholder text to be displayed in the search bar when it is empty.\r\n   */\r\n  placeholder?: string;\r\n  /**\r\n   * Optional. The label for the search button in the search bar.\r\n   */\r\n  performSearchLabel?: string;\r\n  /**\r\n   * Optional. A boolean indicating whether the search bar is disabled.\r\n   */\r\n  disabled?: boolean;\r\n  /**\r\n   * Optional. The validation message to be displayed when the search bar is in an error state.\r\n   */\r\n  validationMessage?: string;\r\n  /**\r\n   * Optional. A function to be called when a keydown event occurs in the search bar.\r\n   */\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  /**\r\n   * Optional. The size of the search bar. Can be 'Small' or 'Medium'.\r\n   */\r\n  size?: Size.Small | Size.Medium;\r\n  /**\r\n   * Optional. The margin of the search bar. Can be any valid CSS margin value.\r\n   */\r\n  margin?: string;\r\n  /**\r\n   * Optional. A boolean indicating whether the dropdown in the search bar should be shown.\r\n   */\r\n  showDropdown?: boolean;\r\n  /**\r\n   * Optional. The icon for the dropdown button in the search bar.\r\n   */\r\n  dropdownButtonIcon?: React.ReactNode;\r\n  /**\r\n   * Optional. The label for the dropdown button in the search bar.\r\n   */  \r\n  dropdownButtonLabel?: string;\r\n  /**\r\n   * Optional. The variant of the dropdown button in the search bar. Can be 'primary', 'secondary', or 'tertiary'.\r\n   */  \r\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\r\n  /**\r\n   * Optional. A function to be called when the dropdown button in the search bar is clicked.\r\n   */  \r\n  dropdownButtonAction?: () => boolean | void | undefined;\r\n  /**\r\n   * Optional. An array of DropdownItem objects representing the items in the dropdown.\r\n   */\r\n  searchList?: DropdownItem[];\r\n  /**\r\n   * Optional. A function to be called when an item is added to the dropdown.\r\n   * It should take a DropdownItem object as a parameter.\r\n   */\r\n  addToSearchList?: (e: DropdownItem) => void;\r\n  /**\r\n   * Optional. A boolean indicating whether the dropdown in the search bar is scrollable.\r\n   */\r\n  dropdownScrollable?: boolean;\r\n};\r\n\r\nconst ClearIconWrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  &.hidden {\r\n    display: none !important;\r\n  }\r\n`;\r\n\r\nconst SearchBar: React.FunctionComponent<SearchBarProps> = ({\r\n                                                             id,\r\n                                                             searchTerm,\r\n                                                             setSearchTerm,\r\n                                                             enterSearch,\r\n                                                             removeSearch,\r\n                                                             placeholder,\r\n                                                             performSearchLabel,\r\n                                                             disabled,\r\n                                                             validationMessage,\r\n                                                             onKeyDown,\r\n                                                             size,\r\n                                                             margin,\r\n                                                             showDropdown,\r\n                                                             dropdownButtonIcon,\r\n                                                             dropdownButtonLabel,\r\n                                                             dropdownButtonVariant,\r\n                                                             dropdownButtonAction,\r\n                                                             searchList=[],\r\n                                                             addToSearchList,\r\n                                                             dropdownScrollable\r\n                                                           }) => {\r\n  const containerRef = React.useRef<any>(null);\r\n  const theme = useTheme();\r\n  const topLevelRef = React.useRef<any>(null);\r\n\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef, topLevelRef]);\r\n\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  const enteredSearchTerm = (e: any) => {\r\n    addToSearchList && addToSearchList({value:e.target.value});\r\n    enterSearch(e);\r\n  }\r\n\r\n  const dropdownAction = () => {\r\n    if(dropdownButtonAction)\r\n      dropdownButtonAction();    \r\n  }\r\n\r\n  return (\r\n    <>\r\n      <InputWrapper\r\n        $disabled={disabled}\r\n        ref={topLevelRef}\r\n        $margin={margin}>\r\n        <SearchField id={'id'} size={size}\r\n                     ref={containerRef}\r\n                     searchTerm={searchTerm}\r\n                     disabled={disabled}\r\n                     validationMessage={validationMessage}>\r\n          <SearchBarInput\r\n            placeholder={disabled ? '' : placeholder}\r\n            id={id}\r\n            size={size}\r\n            disabled={disabled}\r\n            setSearchTerm={(term: string) => setSearchTerm(term)}\r\n            searchTerm={searchTerm}\r\n            onKeyDown={onKeyDown}\r\n            enterSearch={enteredSearchTerm}\r\n            focusParentRefs={[containerRef]}\r\n            onClick={()=>setIsOpen(!isOpen)}\r\n            ref={dropdownRef}\r\n          />\r\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\r\n            <IconButton id={`${id}_Search`}\r\n                        variant=\"secondary\"\r\n                        shape=\"circular\"\r\n                        action={enterSearch}\r\n                        disabled={disabled}\r\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\r\n              <SystemIcons.Search size=\"24px\"/>\r\n            </IconButton>\r\n          </SearchIconWrapper>\r\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\r\n            <IconButton id={`${id}_Clear`}\r\n                        variant=\"secondary\"\r\n                        shape=\"circular\"\r\n                        action={removeSearch}\r\n                        disabled={disabled}\r\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\r\n              <SystemIcons.Clear size=\"24px\"/>\r\n            </IconButton>\r\n          </ClearIconWrapper>\r\n        </SearchField>\r\n\r\n      {showDropdown && <DropdownContent id={'search'}\r\n                                        containerRef={containerRef}\r\n          size={size}\r\n          isButton={false}\r\n          ariaRolesType=\"input\"\r\n          customizationProps={{\r\n            items:searchList,\r\n            action: dropdownAction,\r\n            actionLabel: dropdownButtonLabel,\r\n            actionIcon: dropdownButtonIcon,\r\n            actionVariant: dropdownButtonVariant,\r\n            onValueUpdate:(e)=>{},\r\n            scrollable: dropdownScrollable,\r\n            pinTopItem: true\r\n          }}\r\n          isOpen={isOpen}\r\n          setIsOpen={setIsOpen}\r\n          filter={''}\r\n          selectedValues={searchTerm ? [searchTerm] : []}\r\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\r\n          messageOnNoResults={''}\r\n          focused={null}\r\n          setFocused={()=>{}}\r\n        />}\r\n\r\n      </InputWrapper>\r\n      {validationMessage && (\r\n        <ErrorMessage className={size || ''}>\r\n          <SystemIcons.TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)} className={size || ''}/>\r\n          <span>{validationMessage}</span>\r\n        </ErrorMessage>\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default SearchBar;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/TextField.cjs

@@ -65,7 +65,7 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         "data-testid": dataTestId,
         ref: elementRef,
         type: type || 'text',
-        value: value,
+        value: value ?? '',
         className: cls,
         tabIndex: readOnly || disabled ? -1 : 0,
         autoComplete: autoComplete,
@@ -91,9 +91,15 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         className: size || '',
         type: state ?? _types.States.Invalid,
         children: [state === _types.States.Valid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.CheckMark, {
-          color: _styles.COLORS.getColor('correct_400', theme)
+          color: _styles.COLORS.generateToken({
+            componentType: 'text',
+            defaultVariant: 'positive'
+          }, theme)
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.TechnicalWarning, {
-          color: _styles.COLORS.getColor('critical_400', theme)
+          color: _styles.COLORS.generateToken({
+            componentType: 'text',
+            defaultVariant: 'critical'
+          }, theme)
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           children: validationMessage
         })]

package/dist/InputFields/TextField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.cjs","names":["React","_interopRequireWildcard","require","_icons","_styles","_types","_styling","_common","_TooltipOverflow","_interopRequireDefault","_styledComponents","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","TextField","forwardRef","_ref","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","overflowTooltipPosition","note","className","dataTestId","rest","_objectWithoutProperties2","elementRef","useFocusVisibleRef","theme","useTheme","useImperativeHandle","current","cls","States","Invalid","jsx","Fragment","children","jsxs","InputWrapper","$readOnly","$disabled","$margin","onClick","preventDefault","InputFieldStyling","tabIndex","undefined","target","$activeErrorMessage","Valid","$withoutBorder","position","input","withArrow","maxWidth","align","ValidationMessage","SystemIcons","CheckMark","color","COLORS","getColor","TechnicalWarning","NoteMessage","icon","message","propTypes","_propTypes","string","bool","func","number","oneOf","_default","exports"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS} from '../styles';\r\nimport {Size, States, Testable} from '../types';\r\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {TextFieldNote} from './types';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\nimport { useTheme } from 'styled-components';\r\n\r\nexport type TextFieldProps =\r\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id'  | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\r\n  & {\r\n  /**\r\n     * Optional. The ID of the text field.\r\n     */\r\n  id?: string;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field is disabled.\r\n    */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field is read-only.\r\n    */\r\n  readOnly?: boolean;\r\n\r\n  /**\r\n    * Optional. A function to be called when the text in the text field changes.\r\n    * It should take a string representing the new text.\r\n    */\r\n  onChange?: (text: string) => void;\r\n\r\n  /**\r\n    * Optional. The current value of the text field.\r\n    */\r\n  value?: string;\r\n\r\n  /**\r\n    * Optional. The validation message to be displayed when the text field is in an error state.\r\n    */\r\n  validationMessage?: string;\r\n\r\n  /**\r\n    * Optional. The type of the text field. Can be any valid HTML input type.\r\n    */\r\n  type?: string;\r\n\r\n  /**\r\n    * Optional. The state of the text field. Can be 'Invalid' or 'Valid'.\r\n    */\r\n  state?: States.Invalid | States.Valid;\r\n\r\n  /**\r\n    * Optional. The autocomplete attribute of the text field. Can be any valid HTML autocomplete value.\r\n    */\r\n  autoComplete?: string;\r\n\r\n  /**\r\n    * Optional. The placeholder text to be displayed in the text field when it is empty.\r\n    */\r\n  placeholder?: string;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field is required.\r\n    */\r\n  required?: boolean;\r\n\r\n  /**\r\n    * Optional. The pattern attribute of the text field. Can be any valid HTML pattern value.\r\n    */\r\n  pattern?: string;\r\n\r\n  /**\r\n    * Optional. The maximum length of the text that can be entered in the text field.\r\n    */\r\n  maxLength?: number;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field should be displayed without a border.\r\n    */\r\n  withoutBorder?: boolean;\r\n\r\n  /**\r\n    * Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.\r\n    */\r\n  overflowTooltipPosition?: 'top' | 'bottom';\r\n\r\n  /**\r\n    * Optional. The size of the text field. Can be 'Small' or 'Medium'.\r\n    */\r\n  size?: Size.Small | Size.Medium;\r\n\r\n  /**\r\n    * Optional. The margin of the text field. Can be any valid CSS margin value.\r\n    */\r\n  margin?: string;\r\n\r\n  /**\r\n    * Optional. A note to be displayed below the text field.\r\n    */\r\n  note?: TextFieldNote;\r\n};\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(({\r\n                                      id,\r\n                                      disabled,\r\n                                      readOnly,\r\n                                      onChange,\r\n                                      value,\r\n                                      validationMessage,\r\n                                      type,\r\n                                      autoComplete,\r\n                                      placeholder,\r\n                                      required,\r\n                                      pattern,\r\n                                      maxLength,\r\n                                      withoutBorder,\r\n                                      state,\r\n                                      size,\r\n                                      margin,\r\n                                      overflowTooltipPosition,\r\n                                      note,\r\n                                      className,\r\n                                      dataTestId,\r\n                                      ...rest\r\n                                    }: TextFieldProps, ref) => {\r\n  const elementRef = useFocusVisibleRef();\r\n  const theme = useTheme();\r\n\r\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n  const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\r\n\r\n  return (\r\n    <>\r\n      <InputWrapper\r\n        $readOnly={readOnly}\r\n        $disabled={disabled}\r\n        $margin={margin}\r\n        onClick={(e: any) => {\r\n          if (disabled || readOnly) {\r\n            e.preventDefault();\r\n          }\r\n        }}>\r\n        <InputFieldStyling\r\n          id={id}\r\n          data-testid={dataTestId}\r\n          ref={elementRef}\r\n          type={type || 'text'}\r\n          value={value}\r\n          className={cls}\r\n          tabIndex={readOnly || disabled ? -1 : 0}\r\n          autoComplete={autoComplete}\r\n          placeholder={disabled ? undefined : placeholder}\r\n          disabled={disabled}\r\n          readOnly={readOnly}\r\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n          $activeErrorMessage={!!validationMessage && state !== States.Valid}\r\n          required={required}\r\n          pattern={pattern}\r\n          maxLength={maxLength}\r\n          $withoutBorder={withoutBorder}\r\n          {...rest}\r\n        />\r\n        <TooltipOverflow value={value} position={overflowTooltipPosition} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\r\n          {value}\r\n        </TooltipOverflow>\r\n\r\n        {validationMessage && (\r\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n            {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.getColor('correct_400', theme)}/> :\r\n              <SystemIcons.TechnicalWarning color={COLORS.getColor('critical_400', theme)}/>}\r\n            <span>{validationMessage}</span>\r\n          </ValidationMessage>\r\n        )}\r\n        {note && !disabled && (\r\n          <NoteMessage className={size}>\r\n            {note.icon}\r\n            <span>{note.message}</span>\r\n          </NoteMessage>\r\n        )}\r\n      </InputWrapper>\r\n    </>\r\n  );\r\n});\r\n\r\nexport default TextField;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TextField.cjs","names":["React","_interopRequireWildcard","require","_icons","_styles","_types","_styling","_common","_TooltipOverflow","_interopRequireDefault","_styledComponents","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","TextField","forwardRef","_ref","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","overflowTooltipPosition","note","className","dataTestId","rest","_objectWithoutProperties2","elementRef","useFocusVisibleRef","theme","useTheme","useImperativeHandle","current","cls","States","Invalid","jsx","Fragment","children","jsxs","InputWrapper","$readOnly","$disabled","$margin","onClick","preventDefault","InputFieldStyling","tabIndex","undefined","target","$activeErrorMessage","Valid","$withoutBorder","position","input","withArrow","maxWidth","align","ValidationMessage","SystemIcons","CheckMark","color","COLORS","generateToken","componentType","defaultVariant","TechnicalWarning","NoteMessage","icon","message","propTypes","_propTypes","string","bool","func","number","oneOf","_default","exports"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS} from '../styles';\r\nimport {Size, States, Testable} from '../types';\r\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {TextFieldNote} from './types';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\nimport { useTheme } from 'styled-components';\r\n\r\nexport type TextFieldProps =\r\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id'  | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\r\n  & {\r\n  /**\r\n     * Optional. The ID of the text field.\r\n     */\r\n  id?: string;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field is disabled.\r\n    */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field is read-only.\r\n    */\r\n  readOnly?: boolean;\r\n\r\n  /**\r\n    * Optional. A function to be called when the text in the text field changes.\r\n    * It should take a string representing the new text.\r\n    */\r\n  onChange?: (text: string) => void;\r\n\r\n  /**\r\n    * Optional. The current value of the text field.\r\n    */\r\n  value?: string;\r\n\r\n  /**\r\n    * Optional. The validation message to be displayed when the text field is in an error state.\r\n    */\r\n  validationMessage?: string;\r\n\r\n  /**\r\n    * Optional. The type of the text field. Can be any valid HTML input type.\r\n    */\r\n  type?: string;\r\n\r\n  /**\r\n    * Optional. The state of the text field. Can be 'Invalid' or 'Valid'.\r\n    */\r\n  state?: States.Invalid | States.Valid;\r\n\r\n  /**\r\n    * Optional. The autocomplete attribute of the text field. Can be any valid HTML autocomplete value.\r\n    */\r\n  autoComplete?: string;\r\n\r\n  /**\r\n    * Optional. The placeholder text to be displayed in the text field when it is empty.\r\n    */\r\n  placeholder?: string;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field is required.\r\n    */\r\n  required?: boolean;\r\n\r\n  /**\r\n    * Optional. The pattern attribute of the text field. Can be any valid HTML pattern value.\r\n    */\r\n  pattern?: string;\r\n\r\n  /**\r\n    * Optional. The maximum length of the text that can be entered in the text field.\r\n    */\r\n  maxLength?: number;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field should be displayed without a border.\r\n    */\r\n  withoutBorder?: boolean;\r\n\r\n  /**\r\n    * Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.\r\n    */\r\n  overflowTooltipPosition?: 'top' | 'bottom';\r\n\r\n  /**\r\n    * Optional. The size of the text field. Can be 'Small' or 'Medium'.\r\n    */\r\n  size?: Size.Small | Size.Medium;\r\n\r\n  /**\r\n    * Optional. The margin of the text field. Can be any valid CSS margin value.\r\n    */\r\n  margin?: string;\r\n\r\n  /**\r\n    * Optional. A note to be displayed below the text field.\r\n    */\r\n  note?: TextFieldNote;\r\n};\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(({\r\n                                      id,\r\n                                      disabled,\r\n                                      readOnly,\r\n                                      onChange,\r\n                                      value,\r\n                                      validationMessage,\r\n                                      type,\r\n                                      autoComplete,\r\n                                      placeholder,\r\n                                      required,\r\n                                      pattern,\r\n                                      maxLength,\r\n                                      withoutBorder,\r\n                                      state,\r\n                                      size,\r\n                                      margin,\r\n                                      overflowTooltipPosition,\r\n                                      note,\r\n                                      className,\r\n                                      dataTestId,\r\n                                      ...rest\r\n                                    }: TextFieldProps, ref) => {\r\n  const elementRef = useFocusVisibleRef();\r\n  const theme = useTheme();\r\n\r\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n  const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\r\n\r\n  return (\r\n    <>\r\n      <InputWrapper\r\n        $readOnly={readOnly}\r\n        $disabled={disabled}\r\n        $margin={margin}\r\n        onClick={(e: any) => {\r\n          if (disabled || readOnly) {\r\n            e.preventDefault();\r\n          }\r\n        }}>\r\n        <InputFieldStyling\r\n          id={id}\r\n          data-testid={dataTestId}\r\n          ref={elementRef}\r\n          type={type || 'text'}\r\n          value={value ?? ''}\r\n          className={cls}\r\n          tabIndex={readOnly || disabled ? -1 : 0}\r\n          autoComplete={autoComplete}\r\n          placeholder={disabled ? undefined : placeholder}\r\n          disabled={disabled}\r\n          readOnly={readOnly}\r\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n          $activeErrorMessage={!!validationMessage && state !== States.Valid}\r\n          required={required}\r\n          pattern={pattern}\r\n          maxLength={maxLength}\r\n          $withoutBorder={withoutBorder}\r\n          {...rest}\r\n        />\r\n        <TooltipOverflow value={value} position={overflowTooltipPosition} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\r\n          {value}\r\n        </TooltipOverflow>\r\n\r\n        {validationMessage && (\r\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n            {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.generateToken({componentType:'text', defaultVariant:'positive'}, theme)}/> :\r\n              <SystemIcons.TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)}/>}\r\n            <span>{validationMessage}</span>\r\n          </ValidationMessage>\r\n        )}\r\n        {note && !disabled && (\r\n          <NoteMessage className={size}>\r\n            {note.icon}\r\n            <span>{note.message}</span>\r\n          </NoteMessage>\r\n        )}\r\n      </InputWrapper>\r\n    </>\r\n  );\r\n});\r\n\r\nexport default TextField;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/TextField.d.ts

@@ -76,7 +76,7 @@ export type TextFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInput
       */
     note?: TextFieldNote;
 };
-declare const TextField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "id" | "onChange" | "size" | "disabled" | "pattern" | "type" | "value" | "autoComplete" | "maxLength" | "readOnly"> & {
+declare const TextField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "disabled" | "id" | "onChange" | "size" | "pattern" | "type" | "value" | "autoComplete" | "maxLength" | "readOnly"> & {
     /**
        * Optional. The ID of the text field.
        */

package/dist/InputFields/TextField.js

@@ -56,7 +56,7 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         "data-testid": dataTestId,
         ref: elementRef,
         type: type || 'text',
-        value: value,
+        value: value ?? '',
         className: cls,
         tabIndex: readOnly || disabled ? -1 : 0,
         autoComplete: autoComplete,
@@ -82,9 +82,15 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         className: size || '',
         type: state ?? States.Invalid,
         children: [state === States.Valid ? /*#__PURE__*/_jsx(SystemIcons.CheckMark, {
-          color: COLORS.getColor('correct_400', theme)
+          color: COLORS.generateToken({
+            componentType: 'text',
+            defaultVariant: 'positive'
+          }, theme)
         }) : /*#__PURE__*/_jsx(SystemIcons.TechnicalWarning, {
-          color: COLORS.getColor('critical_400', theme)
+          color: COLORS.generateToken({
+            componentType: 'text',
+            defaultVariant: 'critical'
+          }, theme)
         }), /*#__PURE__*/_jsx("span", {
           children: validationMessage
         })]

package/dist/InputFields/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":["React","SystemIcons","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TooltipOverflow","useTheme","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","TextField","forwardRef","_ref","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","overflowTooltipPosition","note","className","dataTestId","rest","_objectWithoutProperties","_excluded","elementRef","theme","useImperativeHandle","current","cls","Invalid","children","$readOnly","$disabled","$margin","onClick","e","preventDefault","_objectSpread","tabIndex","undefined","target","$activeErrorMessage","Valid","$withoutBorder","position","input","withArrow","maxWidth","align","CheckMark","color","getColor","TechnicalWarning","icon","message","propTypes","_pt","string","bool","func","number","oneOf"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS} from '../styles';\r\nimport {Size, States, Testable} from '../types';\r\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {TextFieldNote} from './types';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\nimport { useTheme } from 'styled-components';\r\n\r\nexport type TextFieldProps =\r\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id'  | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\r\n  & {\r\n  /**\r\n     * Optional. The ID of the text field.\r\n     */\r\n  id?: string;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field is disabled.\r\n    */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field is read-only.\r\n    */\r\n  readOnly?: boolean;\r\n\r\n  /**\r\n    * Optional. A function to be called when the text in the text field changes.\r\n    * It should take a string representing the new text.\r\n    */\r\n  onChange?: (text: string) => void;\r\n\r\n  /**\r\n    * Optional. The current value of the text field.\r\n    */\r\n  value?: string;\r\n\r\n  /**\r\n    * Optional. The validation message to be displayed when the text field is in an error state.\r\n    */\r\n  validationMessage?: string;\r\n\r\n  /**\r\n    * Optional. The type of the text field. Can be any valid HTML input type.\r\n    */\r\n  type?: string;\r\n\r\n  /**\r\n    * Optional. The state of the text field. Can be 'Invalid' or 'Valid'.\r\n    */\r\n  state?: States.Invalid | States.Valid;\r\n\r\n  /**\r\n    * Optional. The autocomplete attribute of the text field. Can be any valid HTML autocomplete value.\r\n    */\r\n  autoComplete?: string;\r\n\r\n  /**\r\n    * Optional. The placeholder text to be displayed in the text field when it is empty.\r\n    */\r\n  placeholder?: string;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field is required.\r\n    */\r\n  required?: boolean;\r\n\r\n  /**\r\n    * Optional. The pattern attribute of the text field. Can be any valid HTML pattern value.\r\n    */\r\n  pattern?: string;\r\n\r\n  /**\r\n    * Optional. The maximum length of the text that can be entered in the text field.\r\n    */\r\n  maxLength?: number;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field should be displayed without a border.\r\n    */\r\n  withoutBorder?: boolean;\r\n\r\n  /**\r\n    * Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.\r\n    */\r\n  overflowTooltipPosition?: 'top' | 'bottom';\r\n\r\n  /**\r\n    * Optional. The size of the text field. Can be 'Small' or 'Medium'.\r\n    */\r\n  size?: Size.Small | Size.Medium;\r\n\r\n  /**\r\n    * Optional. The margin of the text field. Can be any valid CSS margin value.\r\n    */\r\n  margin?: string;\r\n\r\n  /**\r\n    * Optional. A note to be displayed below the text field.\r\n    */\r\n  note?: TextFieldNote;\r\n};\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(({\r\n                                      id,\r\n                                      disabled,\r\n                                      readOnly,\r\n                                      onChange,\r\n                                      value,\r\n                                      validationMessage,\r\n                                      type,\r\n                                      autoComplete,\r\n                                      placeholder,\r\n                                      required,\r\n                                      pattern,\r\n                                      maxLength,\r\n                                      withoutBorder,\r\n                                      state,\r\n                                      size,\r\n                                      margin,\r\n                                      overflowTooltipPosition,\r\n                                      note,\r\n                                      className,\r\n                                      dataTestId,\r\n                                      ...rest\r\n                                    }: TextFieldProps, ref) => {\r\n  const elementRef = useFocusVisibleRef();\r\n  const theme = useTheme();\r\n\r\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n  const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\r\n\r\n  return (\r\n    <>\r\n      <InputWrapper\r\n        $readOnly={readOnly}\r\n        $disabled={disabled}\r\n        $margin={margin}\r\n        onClick={(e: any) => {\r\n          if (disabled || readOnly) {\r\n            e.preventDefault();\r\n          }\r\n        }}>\r\n        <InputFieldStyling\r\n          id={id}\r\n          data-testid={dataTestId}\r\n          ref={elementRef}\r\n          type={type || 'text'}\r\n          value={value}\r\n          className={cls}\r\n          tabIndex={readOnly || disabled ? -1 : 0}\r\n          autoComplete={autoComplete}\r\n          placeholder={disabled ? undefined : placeholder}\r\n          disabled={disabled}\r\n          readOnly={readOnly}\r\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n          $activeErrorMessage={!!validationMessage && state !== States.Valid}\r\n          required={required}\r\n          pattern={pattern}\r\n          maxLength={maxLength}\r\n          $withoutBorder={withoutBorder}\r\n          {...rest}\r\n        />\r\n        <TooltipOverflow value={value} position={overflowTooltipPosition} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\r\n          {value}\r\n        </TooltipOverflow>\r\n\r\n        {validationMessage && (\r\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n            {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.getColor('correct_400', theme)}/> :\r\n              <SystemIcons.TechnicalWarning color={COLORS.getColor('critical_400', theme)}/>}\r\n            <span>{validationMessage}</span>\r\n          </ValidationMessage>\r\n        )}\r\n        {note && !disabled && (\r\n          <NoteMessage className={size}>\r\n            {note.icon}\r\n            <span>{note.message}</span>\r\n          </NoteMessage>\r\n        )}\r\n      </InputWrapper>\r\n    </>\r\n  );\r\n});\r\n\r\nexport default TextField;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TextField.js","names":["React","SystemIcons","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TooltipOverflow","useTheme","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","TextField","forwardRef","_ref","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","overflowTooltipPosition","note","className","dataTestId","rest","_objectWithoutProperties","_excluded","elementRef","theme","useImperativeHandle","current","cls","Invalid","children","$readOnly","$disabled","$margin","onClick","e","preventDefault","_objectSpread","tabIndex","undefined","target","$activeErrorMessage","Valid","$withoutBorder","position","input","withArrow","maxWidth","align","CheckMark","color","generateToken","componentType","defaultVariant","TechnicalWarning","icon","message","propTypes","_pt","string","bool","func","number","oneOf"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS} from '../styles';\r\nimport {Size, States, Testable} from '../types';\r\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {TextFieldNote} from './types';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\nimport { useTheme } from 'styled-components';\r\n\r\nexport type TextFieldProps =\r\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id'  | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\r\n  & {\r\n  /**\r\n     * Optional. The ID of the text field.\r\n     */\r\n  id?: string;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field is disabled.\r\n    */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field is read-only.\r\n    */\r\n  readOnly?: boolean;\r\n\r\n  /**\r\n    * Optional. A function to be called when the text in the text field changes.\r\n    * It should take a string representing the new text.\r\n    */\r\n  onChange?: (text: string) => void;\r\n\r\n  /**\r\n    * Optional. The current value of the text field.\r\n    */\r\n  value?: string;\r\n\r\n  /**\r\n    * Optional. The validation message to be displayed when the text field is in an error state.\r\n    */\r\n  validationMessage?: string;\r\n\r\n  /**\r\n    * Optional. The type of the text field. Can be any valid HTML input type.\r\n    */\r\n  type?: string;\r\n\r\n  /**\r\n    * Optional. The state of the text field. Can be 'Invalid' or 'Valid'.\r\n    */\r\n  state?: States.Invalid | States.Valid;\r\n\r\n  /**\r\n    * Optional. The autocomplete attribute of the text field. Can be any valid HTML autocomplete value.\r\n    */\r\n  autoComplete?: string;\r\n\r\n  /**\r\n    * Optional. The placeholder text to be displayed in the text field when it is empty.\r\n    */\r\n  placeholder?: string;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field is required.\r\n    */\r\n  required?: boolean;\r\n\r\n  /**\r\n    * Optional. The pattern attribute of the text field. Can be any valid HTML pattern value.\r\n    */\r\n  pattern?: string;\r\n\r\n  /**\r\n    * Optional. The maximum length of the text that can be entered in the text field.\r\n    */\r\n  maxLength?: number;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field should be displayed without a border.\r\n    */\r\n  withoutBorder?: boolean;\r\n\r\n  /**\r\n    * Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.\r\n    */\r\n  overflowTooltipPosition?: 'top' | 'bottom';\r\n\r\n  /**\r\n    * Optional. The size of the text field. Can be 'Small' or 'Medium'.\r\n    */\r\n  size?: Size.Small | Size.Medium;\r\n\r\n  /**\r\n    * Optional. The margin of the text field. Can be any valid CSS margin value.\r\n    */\r\n  margin?: string;\r\n\r\n  /**\r\n    * Optional. A note to be displayed below the text field.\r\n    */\r\n  note?: TextFieldNote;\r\n};\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(({\r\n                                      id,\r\n                                      disabled,\r\n                                      readOnly,\r\n                                      onChange,\r\n                                      value,\r\n                                      validationMessage,\r\n                                      type,\r\n                                      autoComplete,\r\n                                      placeholder,\r\n                                      required,\r\n                                      pattern,\r\n                                      maxLength,\r\n                                      withoutBorder,\r\n                                      state,\r\n                                      size,\r\n                                      margin,\r\n                                      overflowTooltipPosition,\r\n                                      note,\r\n                                      className,\r\n                                      dataTestId,\r\n                                      ...rest\r\n                                    }: TextFieldProps, ref) => {\r\n  const elementRef = useFocusVisibleRef();\r\n  const theme = useTheme();\r\n\r\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n  const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\r\n\r\n  return (\r\n    <>\r\n      <InputWrapper\r\n        $readOnly={readOnly}\r\n        $disabled={disabled}\r\n        $margin={margin}\r\n        onClick={(e: any) => {\r\n          if (disabled || readOnly) {\r\n            e.preventDefault();\r\n          }\r\n        }}>\r\n        <InputFieldStyling\r\n          id={id}\r\n          data-testid={dataTestId}\r\n          ref={elementRef}\r\n          type={type || 'text'}\r\n          value={value ?? ''}\r\n          className={cls}\r\n          tabIndex={readOnly || disabled ? -1 : 0}\r\n          autoComplete={autoComplete}\r\n          placeholder={disabled ? undefined : placeholder}\r\n          disabled={disabled}\r\n          readOnly={readOnly}\r\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n          $activeErrorMessage={!!validationMessage && state !== States.Valid}\r\n          required={required}\r\n          pattern={pattern}\r\n          maxLength={maxLength}\r\n          $withoutBorder={withoutBorder}\r\n          {...rest}\r\n        />\r\n        <TooltipOverflow value={value} position={overflowTooltipPosition} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\r\n          {value}\r\n        </TooltipOverflow>\r\n\r\n        {validationMessage && (\r\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n            {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.generateToken({componentType:'text', defaultVariant:'positive'}, theme)}/> :\r\n              <SystemIcons.TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)}/>}\r\n            <span>{validationMessage}</span>\r\n          </ValidationMessage>\r\n        )}\r\n        {note && !disabled && (\r\n          <NoteMessage className={size}>\r\n            {note.icon}\r\n            <span>{note.message}</span>\r\n          </NoteMessage>\r\n        )}\r\n      </InputWrapper>\r\n    </>\r\n  );\r\n});\r\n\r\nexport default TextField;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/Textarea.cjs

@@ -39,30 +39,51 @@ const TextareaWrapper = _styledComponents.default.div`
 `;
 const TextArea = _styledComponents.default.textarea`
   display: block;
-  background: ${props => _styles.COLORS.getColor('white', props.theme)};
+  background: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
   border-radius: 4px;
   outline: none;
   margin-bottom: 4px;
   padding: 16px;
   border: none;
-  box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.getColor('neutral_400', props.theme)};
+  box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'default'
+}, props.theme)};
 
   resize: ${props => props.$autoHeight ? 'none' : ''};
 
-  ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+  ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
   &.small {
-    ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+    ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
     width: 304px;
 
     &::placeholder {
-      ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme))}
+      ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 
   &.medium {
-    ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+    ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
     &::placeholder {
-      ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme))}
+      ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
     width: 344px;
   }
@@ -76,19 +97,31 @@ const TextArea = _styledComponents.default.textarea`
   }
 
   &.invalid {
-    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.getColor('critical_500', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'critical'
+}, props.theme)};
   }
 
   &.valid {
-    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.getColor('correct_500', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'positive'
+}, props.theme)};
   }
 
   &:hover {
-    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'hover'
+}, props.theme)};
   }
 
   &.active {
-    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'active'
+}, props.theme)};
   }
 
   &:read-only:not(:disabled) {
@@ -97,17 +130,29 @@ const TextArea = _styledComponents.default.textarea`
 
   &:disabled {
     cursor: not-allowed;
-    border: 1px solid ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+    border: 1px solid ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
     box-shadow: none !important;
-    color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)} !important;
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)} !important;
 
     &::placeholder {
-      color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+      color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
     }
   }
 
   &::placeholder {
-    ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme))}
+    ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   }
 `;
 const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -148,9 +193,15 @@ const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       className: size || '',
       type: state ?? _types.States.Invalid,
       children: [state === _types.States.Valid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.CheckMark, {
-        color: _styles.COLORS.getColor('correct_400', theme)
+        color: _styles.COLORS.generateToken({
+          componentType: 'text',
+          defaultVariant: 'positive'
+        }, theme)
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.TechnicalWarning, {
-        color: _styles.COLORS.getColor('critical_400', theme)
+        color: _styles.COLORS.generateToken({
+          componentType: 'text',
+          defaultVariant: 'critical'
+        }, theme)
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: validationMessage
       })]