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

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","badge","PasswordRow","PasswordField","forwardRef","_ref","ref","id","disabled","onChange","invalid","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","className","dataTestId","name","rest","_objectWithoutProperties","_excluded","passwordHidden","setPasswordHidden","useState","inputRef","theme","useImperativeHandle","current","handleKeyDown","e","keyCode","cls","children","$disabled","$readOnly","$margin","_objectSpread","type","tabIndex","$activeErrorMessage","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","badge","PasswordRow","PasswordField","forwardRef","_ref","ref","id","disabled","onChange","invalid","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","className","dataTestId","name","rest","_objectWithoutProperties","_excluded","passwordHidden","setPasswordHidden","useState","inputRef","theme","useImperativeHandle","current","handleKeyDown","e","keyCode","cls","children","$disabled","$readOnly","$margin","_objectSpread","type","tabIndex","$activeErrorMessage","target","iconColor","variant","shape","onKeyPress","action","VisibleOff","VisibleOn","TechnicalWarning","color","generateToken","componentType","defaultVariant","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.generateToken({ componentType: 'text', defaultVariant: 'critical' }, 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/QuickSearch.cjs

@@ -45,13 +45,22 @@ const Wrapper = _styledComponents.default.div`
     }
 
     &.expanded {
-      background-color: ${props => _.COLORS.getColor('white', props.theme)};
-      box-shadow: inset 0 0 0 1px ${props => _.COLORS.getColor('neutral_400', props.theme)};
+      background-color: ${props => _.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
+      box-shadow: inset 0 0 0 1px ${props => _.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'default'
+}, props.theme)};
     }
 
     &.expanded:hover,
     &.expanded:focus-within {
-      box-shadow: inset 0 0 0 2px ${props => _.COLORS.getColor('primary_800', props.theme)};
+      box-shadow: inset 0 0 0 2px ${props => _.COLORS.generateToken({
+  componentType: 'border',
+  state: 'hover'
+}, props.theme)};
     }
   }
 
@@ -179,7 +188,13 @@ const QuickSearch = _ref => {
           action: handleSearchIconAction,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Search, {
             size: "24px",
-            color: disabled ? _.COLORS.getColor('neutral_300', theme) : _.COLORS.getColor('neutral_600', theme)
+            color: disabled ? _.COLORS.generateToken({
+              componentType: 'icon',
+              state: 'disabled'
+            }, theme) : _.COLORS.generateToken({
+              componentType: 'icon',
+              defaultVariant: 'subtle'
+            }, theme)
           })
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styling.StyledIcon, {
@@ -197,14 +212,23 @@ const QuickSearch = _ref => {
           },
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Clear, {
             size: "24px",
-            color: disabled ? _.COLORS.getColor('neutral_300', theme) : _.COLORS.getColor('neutral_600', theme)
+            color: disabled ? _.COLORS.generateToken({
+              componentType: 'icon',
+              state: 'disabled'
+            }, theme) : _.COLORS.generateToken({
+              componentType: 'icon',
+              defaultVariant: 'subtle'
+            }, theme)
           })
         })
       }), loading && searchFieldVisible?.visible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styling.StyledIcon, {
         className: size ? size : '',
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.LoadingIndicator, {
           size: _types.Size.Small,
-          color: _.COLORS.getColor('neutral_600', theme)
+          color: _.COLORS.generateToken({
+            componentType: 'icon',
+            defaultVariant: 'subtle'
+          }, theme)
         })
       })]
     })

package/dist/InputFields/QuickSearch.cjs.map

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

package/dist/InputFields/QuickSearch.js

@@ -36,13 +36,22 @@ const Wrapper = styled.div`
     }
 
     &.expanded {
-      background-color: ${props => COLORS.getColor('white', props.theme)};
-      box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
+      box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'default'
+}, props.theme)};
     }
 
     &.expanded:hover,
     &.expanded:focus-within {
-      box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};
+      box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'hover'
+}, props.theme)};
     }
   }
 
@@ -170,7 +179,13 @@ const QuickSearch = _ref => {
           action: handleSearchIconAction,
           children: /*#__PURE__*/_jsx(SystemIcons.Search, {
             size: "24px",
-            color: disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)
+            color: disabled ? COLORS.generateToken({
+              componentType: 'icon',
+              state: 'disabled'
+            }, theme) : COLORS.generateToken({
+              componentType: 'icon',
+              defaultVariant: 'subtle'
+            }, theme)
           })
         })
       }), /*#__PURE__*/_jsx(StyledIcon, {
@@ -188,14 +203,23 @@ const QuickSearch = _ref => {
           },
           children: /*#__PURE__*/_jsx(SystemIcons.Clear, {
             size: "24px",
-            color: disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)
+            color: disabled ? COLORS.generateToken({
+              componentType: 'icon',
+              state: 'disabled'
+            }, theme) : COLORS.generateToken({
+              componentType: 'icon',
+              defaultVariant: 'subtle'
+            }, theme)
           })
         })
       }), loading && searchFieldVisible?.visible && /*#__PURE__*/_jsx(StyledIcon, {
         className: size ? size : '',
         children: /*#__PURE__*/_jsx(LoadingIndicator, {
           size: Size.Small,
-          color: COLORS.getColor('neutral_600', theme)
+          color: COLORS.generateToken({
+            componentType: 'icon',
+            defaultVariant: 'subtle'
+          }, theme)
         })
       })]
     })

package/dist/InputFields/QuickSearch.js.map

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

package/dist/InputFields/RadioButton.cjs

@@ -29,7 +29,10 @@ const StyledRadioButton = _styledComponents.default.div`
   ${props => props.$margin ? `margin: ${props.$margin};` : ''}
   cursor: pointer;
 
-  color: ${props => _styles.COLORS.getColor('black', props.theme)};
+  color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme)};
 
   .pointerTransparent {
     pointer-events: none;
@@ -46,7 +49,16 @@ const StyledRadioButton = _styledComponents.default.div`
     border-radius: 50%;
 
     svg {
-      color: ${props => props.$selected ? _styles.COLORS.getColor('primary_500', props.theme) : props.$invalid ? _styles.COLORS.getColor('critical_400', props.theme) : _styles.COLORS.getColor('neutral_600', props.theme)};
+      color: ${props => props.$selected ? _styles.COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'selected'
+}, props.theme) : props.$invalid ? _styles.COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'critical'
+}, props.theme) : _styles.COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'subtle'
+}, props.theme)};
     }
   }
 
@@ -60,26 +72,38 @@ const StyledRadioButton = _styledComponents.default.div`
     }
 
     span {
-      ${props => (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+      ${props => (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
     }
   }
 
   &.small {
-    ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+    ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
     .radio-button-label {
       padding-top: 14px;
     }
   }
 
   &.medium {
-    ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+    ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
     .radio-button-label {
       padding-top: 12px;
     }
   }
 
   &.large {
-    ${props => (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+    ${props => (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
     .radio-button-label {
       padding-top: 12px;
     }
@@ -91,20 +115,32 @@ const StyledRadioButton = _styledComponents.default.div`
 
   &:not(.disabled):hover {
     .radio-button-icon {
-      background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
 
       svg {
-        color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+        color: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  state: 'hover'
+}, props.theme)};
       }
     }
   }
 
   &:not(.disabled):active {
     .radio-button-icon {
-      background: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
+      background: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
 
       svg {
-        color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+        color: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  state: 'active'
+}, props.theme)};
       }
     }
   }
@@ -112,7 +148,10 @@ const StyledRadioButton = _styledComponents.default.div`
   &.disabled {
     cursor: not-allowed;
 
-    color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
 
     .radio-button-icon,
     .radio-button-label {
@@ -120,20 +159,29 @@ const StyledRadioButton = _styledComponents.default.div`
     }
 
     .radio-button-icon {
-      background-color: ${props => _styles.COLORS.getColor('white', props.theme)};
+      background-color: transparent;
     }
 
     .radio-button-icon svg {
-      color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+      color: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  state: 'disabled'
+}, props.theme)};
     }
   }
 
   &.dropdown-hover:not(.disabled) {
     .radio-button-icon {
-      background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
 
       svg {
-        color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+        color: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  state: 'hover'
+}, props.theme)};
       }
     }
   }

package/dist/InputFields/RadioButton.cjs.map

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