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

package/dist/InputFields/PasswordField.js

@@ -55,9 +55,9 @@ var PasswordField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var cls = "".concat(invalid ? 'invalid' : '', "  ").concat(size || '', " ").concat(className);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(InputWrapper, {
-      disabled: disabled,
-      readOnly: readOnly,
-      margin: margin,
+      $disabled: disabled,
+      $readOnly: readOnly,
+      $margin: margin,
       children: /*#__PURE__*/_jsxs(PasswordRow, {
         children: [/*#__PURE__*/_jsx(InputFieldStyling, _objectSpread({
           id: id,
@@ -69,7 +69,7 @@ var PasswordField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           className: cls,
           tabIndex: disabled || readOnly ? -1 : 0,
           autoComplete: autoComplete,
-          activeErrorMessage: !!validationMessage,
+          $activeErrorMessage: !!validationMessage,
           placeholder: placeholder,
           disabled: disabled,
           required: required,

package/dist/InputFields/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","names":["React","styled","useTheme","COLORS","InputFieldStyling","InputWrapper","ErrorMessage","Z_INDEXES","useFocusVisibleRef","IconButton","SystemIcons","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","StyledPassSwitch","div","_templateObject","_taggedTemplateLiteral","badge","PasswordRow","_templateObject2","PasswordField","forwardRef","_ref","ref","id","disabled","onChange","invalid","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","className","dataTestId","_ref$name","name","rest","_objectWithoutProperties","_excluded","_React$useState","useState","_React$useState2","_slicedToArray","passwordHidden","setPasswordHidden","inputRef","theme","useImperativeHandle","current","handleKeyDown","e","keyCode","cls","concat","children","_objectSpread","type","tabIndex","activeErrorMessage","_e$target","target","iconColor","variant","shape","onKeyPress","action","VisibleOff","VisibleOn","TechnicalWarning","color","getColor","propTypes","_pt","string","isRequired","bool","func"],"sources":["../../src/InputFields/PasswordField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS } from '../styles';\r\nimport { Size, Testable } from '../types';\r\nimport { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';\r\nimport { Z_INDEXES } from '../styles';\r\nimport { useFocusVisibleRef } from '../common';\r\nimport { IconButton } from '../Button';\r\nimport { SystemIcons } from '../icons';\r\n\r\nexport type PasswordFieldProps =\r\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'id' | 'onChange' | 'readOnly' | 'required' | 'placeholder' | 'autoComplete' | 'value' | 'disabled' | 'tabIndex' | 'type'>\r\n  & {\r\n  /**\r\n   * Required. The ID of the password field.\r\n   */\r\n  id: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the password field is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Optional. A function to be called when the value of the password field changes.\r\n   */\r\n  onChange?: (text: string) => void;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the password field is invalid.\r\n   */\r\n  invalid?: boolean;\r\n\r\n  /**\r\n   * Optional. The current value of the password field.\r\n   */\r\n  value?: string;\r\n\r\n  /**\r\n   * Optional. The validation message to be displayed when the password field is invalid.\r\n   */\r\n  validationMessage?: string;\r\n\r\n  /**\r\n   * Optional. The autocomplete attribute for the password field.\r\n   */\r\n  autoComplete?: string;\r\n\r\n  /**\r\n   * Optional. The placeholder text for the password field.\r\n   */\r\n  placeholder?: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the password field is required.\r\n   */\r\n  required?: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the password field is read-only.\r\n   */\r\n  readOnly?: boolean;\r\n\r\n  /**\r\n   * Optional. The size of the password 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 password field. Can be any valid CSS margin value.\r\n   */\r\n  margin?: string;\r\n};\r\n\r\nconst StyledPassSwitch = styled.div`\r\n  z-index: ${Z_INDEXES.badge};\r\n  right: 0;\r\n  position: absolute;\r\n`;\r\n\r\nconst PasswordRow = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(({\r\n                                          id,\r\n                                          disabled,\r\n                                          onChange,\r\n                                          invalid,\r\n                                          value,\r\n                                          validationMessage,\r\n                                          autoComplete,\r\n                                          placeholder,\r\n                                          required,\r\n                                          readOnly,\r\n                                          size,\r\n                                          margin,\r\n                                          className,\r\n                                          dataTestId,\r\n                                          name = 'password',\r\n                                          ...rest\r\n                                        }: PasswordFieldProps, ref) => {\r\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\r\n  const inputRef = useFocusVisibleRef();\r\n  const theme = useTheme();\r\n\r\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\r\n\r\n  const handleKeyDown = (e: any) => {\r\n    if (e.keyCode === 13) {\r\n      setPasswordHidden(!passwordHidden);\r\n    }\r\n  };\r\n\r\n  const cls = `${invalid ? 'invalid' : ''}  ${size || ''} ${className}`;\r\n\r\n  return (\r\n    <>\r\n      <InputWrapper disabled={disabled} readOnly={readOnly} margin={margin}>\r\n        <PasswordRow>\r\n            <InputFieldStyling\r\n              id={id}\r\n              data-testid={dataTestId}\r\n              ref={inputRef}\r\n              type={passwordHidden ? 'password' : 'text'}\r\n              name={name}\r\n              value={value}\r\n              className={cls}\r\n              tabIndex={disabled || readOnly ? -1 : 0}\r\n              autoComplete={autoComplete}\r\n              activeErrorMessage={!!validationMessage}\r\n              placeholder={placeholder}\r\n              disabled={disabled}\r\n              required={required}\r\n              readOnly={readOnly}\r\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n              {...rest}\r\n            />\r\n            <StyledPassSwitch className={size ? size : ''}>\r\n              {!disabled && !readOnly ? (\r\n                passwordHidden ? (\r\n                  <IconButton\r\n                    id={`${id}_Visible`}\r\n                    iconColor={'#666666'}\r\n                    variant={'secondary'}\r\n                    shape={'circular'}\r\n                    onKeyPress={handleKeyDown}\r\n                    action={() => setPasswordHidden(!passwordHidden)}>\r\n                    <SystemIcons.VisibleOff />\r\n                  </IconButton>\r\n                ) : (\r\n                  <IconButton\r\n                    id={`${id}_NotVisible`}\r\n                    iconColor={'#666666'}\r\n                    variant={'secondary'}\r\n                    shape={'circular'}\r\n                    onKeyPress={handleKeyDown}\r\n                    action={() => setPasswordHidden(!passwordHidden)}>\r\n                    <SystemIcons.VisibleOn />\r\n                  </IconButton>\r\n                )\r\n              ) : null}\r\n            </StyledPassSwitch>\r\n        </PasswordRow>\r\n      </InputWrapper>\r\n      {validationMessage && (\r\n        <ErrorMessage className={size || ''}>\r\n          <SystemIcons.TechnicalWarning color={COLORS.getColor('critical_400', theme)} />\r\n          <span>{validationMessage}</span>\r\n        </ErrorMessage>\r\n      )}\r\n    </>\r\n  );\r\n});\r\n\r\nexport default PasswordField;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"PasswordField.js","names":["React","styled","useTheme","COLORS","InputFieldStyling","InputWrapper","ErrorMessage","Z_INDEXES","useFocusVisibleRef","IconButton","SystemIcons","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","StyledPassSwitch","div","_templateObject","_taggedTemplateLiteral","badge","PasswordRow","_templateObject2","PasswordField","forwardRef","_ref","ref","id","disabled","onChange","invalid","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","className","dataTestId","_ref$name","name","rest","_objectWithoutProperties","_excluded","_React$useState","useState","_React$useState2","_slicedToArray","passwordHidden","setPasswordHidden","inputRef","theme","useImperativeHandle","current","handleKeyDown","e","keyCode","cls","concat","children","$disabled","$readOnly","$margin","_objectSpread","type","tabIndex","$activeErrorMessage","_e$target","target","iconColor","variant","shape","onKeyPress","action","VisibleOff","VisibleOn","TechnicalWarning","color","getColor","propTypes","_pt","string","isRequired","bool","func"],"sources":["../../src/InputFields/PasswordField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS } from '../styles';\r\nimport { Size, Testable } from '../types';\r\nimport { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';\r\nimport { Z_INDEXES } from '../styles';\r\nimport { useFocusVisibleRef } from '../common';\r\nimport { IconButton } from '../Button';\r\nimport { SystemIcons } from '../icons';\r\n\r\nexport type PasswordFieldProps =\r\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'id' | 'onChange' | 'readOnly' | 'required' | 'placeholder' | 'autoComplete' | 'value' | 'disabled' | 'tabIndex' | 'type'>\r\n  & {\r\n  /**\r\n   * Required. The ID of the password field.\r\n   */\r\n  id: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the password field is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Optional. A function to be called when the value of the password field changes.\r\n   */\r\n  onChange?: (text: string) => void;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the password field is invalid.\r\n   */\r\n  invalid?: boolean;\r\n\r\n  /**\r\n   * Optional. The current value of the password field.\r\n   */\r\n  value?: string;\r\n\r\n  /**\r\n   * Optional. The validation message to be displayed when the password field is invalid.\r\n   */\r\n  validationMessage?: string;\r\n\r\n  /**\r\n   * Optional. The autocomplete attribute for the password field.\r\n   */\r\n  autoComplete?: string;\r\n\r\n  /**\r\n   * Optional. The placeholder text for the password field.\r\n   */\r\n  placeholder?: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the password field is required.\r\n   */\r\n  required?: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the password field is read-only.\r\n   */\r\n  readOnly?: boolean;\r\n\r\n  /**\r\n   * Optional. The size of the password 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 password field. Can be any valid CSS margin value.\r\n   */\r\n  margin?: string;\r\n};\r\n\r\nconst StyledPassSwitch = styled.div`\r\n  z-index: ${Z_INDEXES.badge};\r\n  right: 0;\r\n  position: absolute;\r\n`;\r\n\r\nconst PasswordRow = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nconst PasswordField = React.forwardRef<HTMLInputElement, PasswordFieldProps>(({\r\n                                          id,\r\n                                          disabled,\r\n                                          onChange,\r\n                                          invalid,\r\n                                          value,\r\n                                          validationMessage,\r\n                                          autoComplete,\r\n                                          placeholder,\r\n                                          required,\r\n                                          readOnly,\r\n                                          size,\r\n                                          margin,\r\n                                          className,\r\n                                          dataTestId,\r\n                                          name = 'password',\r\n                                          ...rest\r\n                                        }: PasswordFieldProps, ref) => {\r\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\r\n  const inputRef = useFocusVisibleRef();\r\n  const theme = useTheme();\r\n\r\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\r\n\r\n  const handleKeyDown = (e: any) => {\r\n    if (e.keyCode === 13) {\r\n      setPasswordHidden(!passwordHidden);\r\n    }\r\n  };\r\n\r\n  const cls = `${invalid ? 'invalid' : ''}  ${size || ''} ${className}`;\r\n\r\n  return (\r\n    <>\r\n      <InputWrapper $disabled={disabled} $readOnly={readOnly} $margin={margin}>\r\n        <PasswordRow>\r\n            <InputFieldStyling\r\n              id={id}\r\n              data-testid={dataTestId}\r\n              ref={inputRef}\r\n              type={passwordHidden ? 'password' : 'text'}\r\n              name={name}\r\n              value={value}\r\n              className={cls}\r\n              tabIndex={disabled || readOnly ? -1 : 0}\r\n              autoComplete={autoComplete}\r\n              $activeErrorMessage={!!validationMessage}\r\n              placeholder={placeholder}\r\n              disabled={disabled}\r\n              required={required}\r\n              readOnly={readOnly}\r\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n              {...rest}\r\n            />\r\n            <StyledPassSwitch className={size ? size : ''}>\r\n              {!disabled && !readOnly ? (\r\n                passwordHidden ? (\r\n                  <IconButton\r\n                    id={`${id}_Visible`}\r\n                    iconColor={'#666666'}\r\n                    variant={'secondary'}\r\n                    shape={'circular'}\r\n                    onKeyPress={handleKeyDown}\r\n                    action={() => setPasswordHidden(!passwordHidden)}>\r\n                    <SystemIcons.VisibleOff />\r\n                  </IconButton>\r\n                ) : (\r\n                  <IconButton\r\n                    id={`${id}_NotVisible`}\r\n                    iconColor={'#666666'}\r\n                    variant={'secondary'}\r\n                    shape={'circular'}\r\n                    onKeyPress={handleKeyDown}\r\n                    action={() => setPasswordHidden(!passwordHidden)}>\r\n                    <SystemIcons.VisibleOn />\r\n                  </IconButton>\r\n                )\r\n              ) : null}\r\n            </StyledPassSwitch>\r\n        </PasswordRow>\r\n      </InputWrapper>\r\n      {validationMessage && (\r\n        <ErrorMessage className={size || ''}>\r\n          <SystemIcons.TechnicalWarning color={COLORS.getColor('critical_400', theme)} />\r\n          <span>{validationMessage}</span>\r\n        </ErrorMessage>\r\n      )}\r\n    </>\r\n  );\r\n});\r\n\r\nexport default PasswordField;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/SearchBar.cjs

@@ -75,9 +75,9 @@ var SearchBar = function SearchBar(_ref) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.InputWrapper, {
-      disabled: disabled,
+      $disabled: disabled,
       ref: topLevelRef,
-      margin: margin,
+      $margin: margin,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_SearchField["default"], {
         id: 'id',
         size: size,

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","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ClearIconWrapper","styled","div","_taggedTemplateLiteral2","SearchBar","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","_ref$searchList","searchList","addToSearchList","dropdownScrollable","containerRef","React","useRef","theme","useTheme","topLevelRef","_React$useState","useState","_React$useState2","_slicedToArray2","isOpen","setIsOpen","dropdownRef","useClickOutsideRef","isPressingEnter","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","jsxs","Fragment","children","InputWrapper","ref","jsx","term","focusParentRefs","onClick","SearchIconWrapper","className","IconButton","concat","variant","shape","action","onKeyPress","SystemIcons","Search","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","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ClearIconWrapper","styled","div","_taggedTemplateLiteral2","SearchBar","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","_ref$searchList","searchList","addToSearchList","dropdownScrollable","containerRef","React","useRef","theme","useTheme","topLevelRef","_React$useState","useState","_React$useState2","_slicedToArray2","isOpen","setIsOpen","dropdownRef","useClickOutsideRef","isPressingEnter","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","jsxs","Fragment","children","InputWrapper","$disabled","ref","$margin","jsx","term","focusParentRefs","onClick","SearchIconWrapper","className","IconButton","concat","variant","shape","action","onKeyPress","SystemIcons","Search","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":[]}

package/dist/InputFields/SearchBar.js

@@ -67,9 +67,9 @@ var SearchBar = function SearchBar(_ref) {
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(InputWrapper, {
-      disabled: disabled,
+      $disabled: disabled,
       ref: topLevelRef,
-      margin: margin,
+      $margin: margin,
       children: [/*#__PURE__*/_jsxs(SearchField, {
         id: 'id',
         size: size,

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","_templateObject","_taggedTemplateLiteral","SearchBar","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","_ref$searchList","searchList","addToSearchList","dropdownScrollable","containerRef","useRef","theme","topLevelRef","_React$useState","useState","_React$useState2","_slicedToArray","isOpen","setIsOpen","dropdownRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","children","ref","term","focusParentRefs","onClick","className","concat","variant","shape","action","onKeyPress","Search","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","_templateObject","_taggedTemplateLiteral","SearchBar","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","_ref$searchList","searchList","addToSearchList","dropdownScrollable","containerRef","useRef","theme","topLevelRef","_React$useState","useState","_React$useState2","_slicedToArray","isOpen","setIsOpen","dropdownRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","children","$disabled","ref","$margin","term","focusParentRefs","onClick","className","concat","variant","shape","action","onKeyPress","Search","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":[]}

package/dist/InputFields/TextField.cjs

@@ -53,9 +53,9 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var cls = "".concat(state || (validationMessage ? _types.States.Invalid : ''), " ").concat(size || '');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.InputWrapper, {
-      readOnly: readOnly,
-      disabled: disabled,
-      margin: margin,
+      $readOnly: readOnly,
+      $disabled: disabled,
+      $margin: margin,
       onClick: function onClick(e) {
         if (disabled || readOnly) {
           e.preventDefault();
@@ -77,11 +77,11 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           var _e$target;
           return _onChange && _onChange((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '');
         },
-        activeErrorMessage: !!validationMessage && state !== _types.States.Valid,
+        $activeErrorMessage: !!validationMessage && state !== _types.States.Valid,
         required: required,
         pattern: pattern,
         maxLength: maxLength,
-        withoutBorder: withoutBorder
+        $withoutBorder: withoutBorder
       }, rest)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipOverflow["default"], {
         value: value,
         position: overflowTooltipPosition,

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","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","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","concat","States","Invalid","jsx","Fragment","children","jsxs","InputWrapper","onClick","preventDefault","InputFieldStyling","tabIndex","undefined","_e$target","target","activeErrorMessage","Valid","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":";;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AAEA,IAAAM,gBAAA,GAAAC,sBAAA,CAAAP,OAAA;AACA,IAAAQ,iBAAA,GAAAR,OAAA;AAA6C,IAAAS,WAAA,GAAAT,OAAA;AAAA,IAAAU,SAAA;AAAA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAb,wBAAAa,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,gBAAAK,OAAA,CAAAL,CAAA,0BAAAA,CAAA,sBAAAA,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,cAAAR,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAW,QAAAnB,CAAA,EAAAE,CAAA,QAAAC,CAAA,GAAAQ,MAAA,CAAAS,IAAA,CAAApB,CAAA,OAAAW,MAAA,CAAAU,qBAAA,QAAAC,CAAA,GAAAX,MAAA,CAAAU,qBAAA,CAAArB,CAAA,GAAAE,CAAA,KAAAoB,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAArB,CAAA,WAAAS,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAE,CAAA,EAAAsB,UAAA,OAAArB,CAAA,CAAAsB,IAAA,CAAAC,KAAA,CAAAvB,CAAA,EAAAmB,CAAA,YAAAnB,CAAA;AAAA,SAAAwB,cAAA3B,CAAA,aAAAE,CAAA,MAAAA,CAAA,GAAA0B,SAAA,CAAAC,MAAA,EAAA3B,CAAA,UAAAC,CAAA,WAAAyB,SAAA,CAAA1B,CAAA,IAAA0B,SAAA,CAAA1B,CAAA,QAAAA,CAAA,OAAAiB,OAAA,CAAAR,MAAA,CAAAR,CAAA,OAAA2B,OAAA,WAAA5B,CAAA,QAAA6B,gBAAA,aAAA/B,CAAA,EAAAE,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAS,MAAA,CAAAqB,yBAAA,GAAArB,MAAA,CAAAsB,gBAAA,CAAAjC,CAAA,EAAAW,MAAA,CAAAqB,yBAAA,CAAA7B,CAAA,KAAAgB,OAAA,CAAAR,MAAA,CAAAR,CAAA,GAAA2B,OAAA,WAAA5B,CAAA,IAAAS,MAAA,CAAAC,cAAA,CAAAZ,CAAA,EAAAE,CAAA,EAAAS,MAAA,CAAAE,wBAAA,CAAAV,CAAA,EAAAD,CAAA,iBAAAF,CAAA;AAiG7C,IAAMkC,SAAS,gBAAGhD,KAAK,CAACiD,UAAU,CAAmC,UAAAC,IAAA,EAsBdC,GAAG,EAAK;EAAA,IArBzBC,EAAE,GAAAF,IAAA,CAAFE,EAAE;IACFC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IACRC,SAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,iBAAiB,GAAAP,IAAA,CAAjBO,iBAAiB;IACjBC,IAAI,GAAAR,IAAA,CAAJQ,IAAI;IACJC,YAAY,GAAAT,IAAA,CAAZS,YAAY;IACZC,WAAW,GAAAV,IAAA,CAAXU,WAAW;IACXC,QAAQ,GAAAX,IAAA,CAARW,QAAQ;IACRC,OAAO,GAAAZ,IAAA,CAAPY,OAAO;IACPC,SAAS,GAAAb,IAAA,CAATa,SAAS;IACTC,aAAa,GAAAd,IAAA,CAAbc,aAAa;IACbC,KAAK,GAAAf,IAAA,CAALe,KAAK;IACLC,IAAI,GAAAhB,IAAA,CAAJgB,IAAI;IACJC,MAAM,GAAAjB,IAAA,CAANiB,MAAM;IACNC,uBAAuB,GAAAlB,IAAA,CAAvBkB,uBAAuB;IACvBC,IAAI,GAAAnB,IAAA,CAAJmB,IAAI;IACJC,SAAS,GAAApB,IAAA,CAAToB,SAAS;IACTC,UAAU,GAAArB,IAAA,CAAVqB,UAAU;IACPC,IAAI,OAAAC,yBAAA,aAAAvB,IAAA,EAAAtC,SAAA;EAE3C,IAAM8D,UAAU,GAAG,IAAAC,0BAAkB,EAAC,CAAC;EACvC,IAAMC,KAAK,GAAG,IAAAC,0BAAQ,EAAC,CAAC;EAExB7E,KAAK,CAAC8E,mBAAmB,CAAC3B,GAAG,EAAE;IAAA,OAAMuB,UAAU,CAACK,OAAO;EAAA,GAAE,CAACL,UAAU,CAAC,CAAC;EAEtE,IAAMM,GAAG,MAAAC,MAAA,CAAMhB,KAAK,KAAKR,iBAAiB,GAAGyB,aAAM,CAACC,OAAO,GAAG,EAAE,CAAC,OAAAF,MAAA,CAAIf,IAAI,IAAI,EAAE,CAAE;EAEjF,oBACE,IAAAvD,WAAA,CAAAyE,GAAA,EAAAzE,WAAA,CAAA0E,QAAA;IAAAC,QAAA,eACE,IAAA3E,WAAA,CAAA4E,IAAA,EAACjF,QAAA,CAAAkF,YAAY;MACXlC,QAAQ,EAAEA,QAAS;MACnBD,QAAQ,EAAEA,QAAS;MACnBc,MAAM,EAAEA,MAAO;MACfsB,OAAO,EAAE,SAAAA,QAAC3E,CAAM,EAAK;QACnB,IAAIuC,QAAQ,IAAIC,QAAQ,EAAE;UACxBxC,CAAC,CAAC4E,cAAc,CAAC,CAAC;QACpB;MACF,CAAE;MAAAJ,QAAA,gBACF,IAAA3E,WAAA,CAAAyE,GAAA,EAAC9E,QAAA,CAAAqF,iBAAiB,EAAAlD,aAAA;QAChBW,EAAE,EAAEA,EAAG;QACP,eAAamB,UAAW;QACxBpB,GAAG,EAAEuB,UAAW;QAChBhB,IAAI,EAAEA,IAAI,IAAI,MAAO;QACrBF,KAAK,EAAEA,KAAM;QACbc,SAAS,EAAEU,GAAI;QACfY,QAAQ,EAAEtC,QAAQ,IAAID,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;QACxCM,YAAY,EAAEA,YAAa;QAC3BC,WAAW,EAAEP,QAAQ,GAAGwC,SAAS,GAAGjC,WAAY;QAChDP,QAAQ,EAAEA,QAAS;QACnBC,QAAQ,EAAEA,QAAS;QACnBC,QAAQ,EAAE,SAAAA,SAACzC,CAAM;UAAA,IAAAgF,SAAA;UAAA,OAAKvC,SAAQ,IAAIA,SAAQ,CAAC,CAAAzC,CAAC,aAADA,CAAC,wBAAAgF,SAAA,GAADhF,CAAC,CAAEiF,MAAM,cAAAD,SAAA,uBAATA,SAAA,CAAWtC,KAAK,KAAI,EAAE,CAAC;QAAA,CAAC;QACnEwC,kBAAkB,EAAE,CAAC,CAACvC,iBAAiB,IAAIQ,KAAK,KAAKiB,aAAM,CAACe,KAAM;QAClEpC,QAAQ,EAAEA,QAAS;QACnBC,OAAO,EAAEA,OAAQ;QACjBC,SAAS,EAAEA,SAAU;QACrBC,aAAa,EAAEA;MAAc,GACzBQ,IAAI,CACT,CAAC,eACF,IAAA7D,WAAA,CAAAyE,GAAA,EAAC5E,gBAAA,WAAe;QAACgD,KAAK,EAAEA,KAAM;QAAC0C,QAAQ,EAAE9B,uBAAwB;QAAC+B,KAAK,EAAEzB,UAAW;QAAC0B,SAAS,EAAE,IAAK;QAACC,QAAQ,EAAC,MAAM;QAACnC,IAAI,EAAEA,IAAK;QAACoC,KAAK,EAAC,KAAK;QAAAhB,QAAA,EAC1I9B;MAAK,CACS,CAAC,EAEjBC,iBAAiB,iBAChB,IAAA9C,WAAA,CAAA4E,IAAA,EAACjF,QAAA,CAAAiG,iBAAiB;QAACjC,SAAS,EAAEJ,IAAI,IAAI,EAAG;QAACR,IAAI,EAAEO,KAAK,aAALA,KAAK,cAALA,KAAK,GAAIiB,aAAM,CAACC,OAAQ;QAAAG,QAAA,GACrErB,KAAK,KAAKiB,aAAM,CAACe,KAAK,gBAAG,IAAAtF,WAAA,CAAAyE,GAAA,EAACjF,MAAA,CAAAqG,WAAW,CAACC,SAAS;UAACC,KAAK,EAAEC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEhC,KAAK;QAAE,CAAC,CAAC,gBAC9F,IAAAjE,WAAA,CAAAyE,GAAA,EAACjF,MAAA,CAAAqG,WAAW,CAACK,gBAAgB;UAACH,KAAK,EAAEC,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEhC,KAAK;QAAE,CAAC,CAAC,eAChF,IAAAjE,WAAA,CAAAyE,GAAA;UAAAE,QAAA,EAAO7B;QAAiB,CAAO,CAAC;MAAA,CACf,CACpB,EACAY,IAAI,IAAI,CAAChB,QAAQ,iBAChB,IAAA1C,WAAA,CAAA4E,IAAA,EAACjF,QAAA,CAAAwG,WAAW;QAACxC,SAAS,EAAEJ,IAAK;QAAAoB,QAAA,GAC1BjB,IAAI,CAAC0C,IAAI,eACV,IAAApG,WAAA,CAAAyE,GAAA;UAAAE,QAAA,EAAOjB,IAAI,CAAC2C;QAAO,CAAO,CAAC;MAAA,CAChB,CACd;IAAA,CACW;EAAC,CACf,CAAC;AAEP,CAAC,CAAC;AAAChE,SAAA,CAAAiE,SAAA;EA1KD7D,EAAE,EAAA8D,UAAA,YAAAC,MAAA;EAKF9D,QAAQ,EAAA6D,UAAA,YAAAE,IAAA;EAKR9D,QAAQ,EAAA4D,UAAA,YAAAE,IAAA;EAMR7D,QAAQ,EAAA2D,UAAA,YAAAG,IAAA;EAKR7D,KAAK,EAAA0D,UAAA,YAAAC,MAAA;EAKL1D,iBAAiB,EAAAyD,UAAA,YAAAC,MAAA;EAKjBzD,IAAI,EAAAwD,UAAA,YAAAC,MAAA;EAUJxD,YAAY,EAAAuD,UAAA,YAAAC,MAAA;EAKZvD,WAAW,EAAAsD,UAAA,YAAAC,MAAA;EAKXtD,QAAQ,EAAAqD,UAAA,YAAAE,IAAA;EAKRtD,OAAO,EAAAoD,UAAA,YAAAC,MAAA;EAKPpD,SAAS,EAAAmD,UAAA,YAAAI,MAAA;EAKTtD,aAAa,EAAAkD,UAAA,YAAAE,IAAA;EAKbhD,uBAAuB,EAAA8C,UAAA,YAAAK,KAAA,EAAG,KAAK,EAAG,QAAQ;EAU1CpD,MAAM,EAAA+C,UAAA,YAAAC;AAAA;AAAA,IAAAK,QAAA,GA2FOxE,SAAS;AAAAyE,OAAA,cAAAD,QAAA","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","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","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","concat","States","Invalid","jsx","Fragment","children","jsxs","InputWrapper","$readOnly","$disabled","$margin","onClick","preventDefault","InputFieldStyling","tabIndex","undefined","_e$target","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":[]}

package/dist/InputFields/TextField.js

@@ -45,9 +45,9 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var cls = "".concat(state || (validationMessage ? States.Invalid : ''), " ").concat(size || '');
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs(InputWrapper, {
-      readOnly: readOnly,
-      disabled: disabled,
-      margin: margin,
+      $readOnly: readOnly,
+      $disabled: disabled,
+      $margin: margin,
       onClick: function onClick(e) {
         if (disabled || readOnly) {
           e.preventDefault();
@@ -69,11 +69,11 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           var _e$target;
           return _onChange && _onChange((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '');
         },
-        activeErrorMessage: !!validationMessage && state !== States.Valid,
+        $activeErrorMessage: !!validationMessage && state !== States.Valid,
         required: required,
         pattern: pattern,
         maxLength: maxLength,
-        withoutBorder: withoutBorder
+        $withoutBorder: withoutBorder
       }, rest)), /*#__PURE__*/_jsx(TooltipOverflow, {
         value: value,
         position: overflowTooltipPosition,

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","concat","Invalid","children","onClick","e","preventDefault","_objectSpread","tabIndex","undefined","_e$target","target","activeErrorMessage","Valid","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","concat","Invalid","children","$readOnly","$disabled","$margin","onClick","e","preventDefault","_objectSpread","tabIndex","undefined","_e$target","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":[]}

package/dist/InputFields/Textarea.cjs

@@ -37,14 +37,14 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TextareaWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  ", "\n"])), function (props) {
-  return props.margin ? "margin: ".concat(props.margin, ";") : '';
+  return props.$margin ? "margin: ".concat(props.$margin, ";") : '';
 });
 var TextArea = _styledComponents["default"].textarea(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: block;\n  background: ", ";\n  border-radius: 4px;\n  outline: none;\n  margin-bottom: 4px;\n  padding: 16px;\n  border: none;\n  box-shadow: inset 0 0 0 1px ", ";\n\n  resize: ", ";\n\n  ", "\n  &.small {\n    ", "\n    width: 304px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    &::placeholder {\n      ", "\n    }\n    width: 344px;\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:read-only:not(:disabled) {\n    ", "\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    border: 1px solid ", ";\n    box-shadow: none !important;\n    color: ", " !important;\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  &::placeholder {\n    ", "\n  }\n"])), function (props) {
   return _styles.COLORS.getColor('white', props.theme);
 }, function (props) {
   return _styles.COLORS.getColor('neutral_400', props.theme);
 }, function (props) {
-  return props.autoHeight ? 'none' : '';
+  return props.$autoHeight ? 'none' : '';
 }, function (props) {
   return (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme));
 }, function (props) {
@@ -103,7 +103,7 @@ var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       ref: elementRef,
       value: value,
       placeholder: disabled ? undefined : placeholder,
-      autoHeight: autoHeight,
+      $autoHeight: autoHeight,
       className: cls,
       disabled: disabled,
       onChange: function onChange(e) {