@laerdal/life-react-components 6.0.0-dev.8.full → 6.0.1

package/dist/InputFields/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","StyledRadioButton","div","props","$margin","generateToken","componentType","defaultVariant","theme","$selected","$invalid","Regular","state","RadioButton","forwardRef","_ref","ref","id","selected","label","additionalLabel","invalid","select","disabled","margin","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","_objectWithoutProperties","_excluded","onKeyPress","e","keyCode","Medium","cls","_objectSpread","onClick","onMouseDown","onKeyDown","$disabled","tabIndex","children","RadioButtonOn","RadioButtonOff","htmlFor","undefined","propTypes","_pt","string","bool","isRequired","func","number"],"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":[]}
+{"version":3,"file":"RadioButton.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","StyledRadioButton","div","props","$margin","generateToken","componentType","defaultVariant","theme","$selected","$invalid","Regular","state","RadioButton","forwardRef","_ref","ref","id","selected","label","additionalLabel","invalid","select","disabled","margin","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","_objectWithoutProperties","_excluded","onKeyPress","e","keyCode","Medium","cls","_objectSpread","onClick","onMouseDown","onKeyDown","$disabled","tabIndex","children","RadioButtonOn","RadioButtonOff","htmlFor","undefined","propTypes","_pt","string","bool","isRequired","func","oneOfType","node","number"],"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 | React.ReactNode;\r\n  /** Optional. Secondary label to be shown under the main 'label' */\r\n  additionalLabel?: string | React.ReactNode;\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":[]}

package/dist/InputFields/TextField.cjs

@@ -17,7 +17,7 @@ var _common = require("../common");
 var _TooltipOverflow = _interopRequireDefault(require("../Tooltips/TooltipOverflow"));
 var _styledComponents = require("styled-components");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "withoutBorder", "state", "size", "margin", "overflowTooltipPosition", "note", "className", "dataTestId"];
+const _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "state", "size", "margin", "overflowTooltipPosition", "note", "className", "dataTestId"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; }
@@ -36,7 +36,6 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       required,
       pattern,
       maxLength,
-      withoutBorder,
       state,
       size,
       margin,
@@ -76,8 +75,7 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         $activeErrorMessage: !!validationMessage && state !== _types.States.Valid,
         required: required,
         pattern: pattern,
-        maxLength: maxLength,
-        $withoutBorder: withoutBorder
+        maxLength: maxLength
       }, rest)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipOverflow.default, {
         value: value,
         position: overflowTooltipPosition,
@@ -125,7 +123,6 @@ TextField.propTypes = {
   required: _propTypes.default.bool,
   pattern: _propTypes.default.string,
   maxLength: _propTypes.default.number,
-  withoutBorder: _propTypes.default.bool,
   overflowTooltipPosition: _propTypes.default.oneOf(['top', 'bottom']),
   margin: _propTypes.default.string
 };

package/dist/InputFields/TextField.cjs.map

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

package/dist/InputFields/TextField.d.ts

@@ -55,10 +55,6 @@ export type TextFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInput
       * Optional. The maximum length of the text that can be entered in the text field.
       */
     maxLength?: number;
-    /**
-      * Optional. A boolean indicating whether the text field should be displayed without a border.
-      */
-    withoutBorder?: boolean;
     /**
       * Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.
       */
@@ -130,10 +126,6 @@ declare const TextField: React.ForwardRefExoticComponent<Testable & Omit<React.I
       * Optional. The maximum length of the text that can be entered in the text field.
       */
     maxLength?: number;
-    /**
-      * Optional. A boolean indicating whether the text field should be displayed without a border.
-      */
-    withoutBorder?: boolean;
     /**
       * Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.
       */

package/dist/InputFields/TextField.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _pt from "prop-types";
-const _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "withoutBorder", "state", "size", "margin", "overflowTooltipPosition", "note", "className", "dataTestId"];
+const _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "state", "size", "margin", "overflowTooltipPosition", "note", "className", "dataTestId"];
 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) { _defineProperty(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; }
 import * as React from 'react';
@@ -27,7 +27,6 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       required,
       pattern,
       maxLength,
-      withoutBorder,
       state,
       size,
       margin,
@@ -67,8 +66,7 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         $activeErrorMessage: !!validationMessage && state !== States.Valid,
         required: required,
         pattern: pattern,
-        maxLength: maxLength,
-        $withoutBorder: withoutBorder
+        maxLength: maxLength
       }, rest)), /*#__PURE__*/_jsx(TooltipOverflow, {
         value: value,
         position: overflowTooltipPosition,
@@ -116,7 +114,6 @@ TextField.propTypes = {
   required: _pt.bool,
   pattern: _pt.string,
   maxLength: _pt.number,
-  withoutBorder: _pt.bool,
   overflowTooltipPosition: _pt.oneOf(['top', 'bottom']),
   margin: _pt.string
 };

package/dist/InputFields/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":["React","SystemIcons","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TooltipOverflow","useTheme","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","TextField","forwardRef","_ref","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","overflowTooltipPosition","note","className","dataTestId","rest","_objectWithoutProperties","_excluded","elementRef","theme","useImperativeHandle","current","cls","Invalid","children","$readOnly","$disabled","$margin","onClick","e","preventDefault","_objectSpread","tabIndex","undefined","target","$activeErrorMessage","Valid","$withoutBorder","position","input","withArrow","maxWidth","align","CheckMark","color","generateToken","componentType","defaultVariant","TechnicalWarning","icon","message","propTypes","_pt","string","bool","func","number","oneOf"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS} from '../styles';\r\nimport {Size, States, Testable} from '../types';\r\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {TextFieldNote} from './types';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\nimport { useTheme } from 'styled-components';\r\n\r\nexport type TextFieldProps =\r\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id'  | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\r\n  & {\r\n  /**\r\n     * Optional. The ID of the text field.\r\n     */\r\n  id?: string;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field is disabled.\r\n    */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field is read-only.\r\n    */\r\n  readOnly?: boolean;\r\n\r\n  /**\r\n    * Optional. A function to be called when the text in the text field changes.\r\n    * It should take a string representing the new text.\r\n    */\r\n  onChange?: (text: string) => void;\r\n\r\n  /**\r\n    * Optional. The current value of the text field.\r\n    */\r\n  value?: string;\r\n\r\n  /**\r\n    * Optional. The validation message to be displayed when the text field is in an error state.\r\n    */\r\n  validationMessage?: string;\r\n\r\n  /**\r\n    * Optional. The type of the text field. Can be any valid HTML input type.\r\n    */\r\n  type?: string;\r\n\r\n  /**\r\n    * Optional. The state of the text field. Can be 'Invalid' or 'Valid'.\r\n    */\r\n  state?: States.Invalid | States.Valid;\r\n\r\n  /**\r\n    * Optional. The autocomplete attribute of the text field. Can be any valid HTML autocomplete value.\r\n    */\r\n  autoComplete?: string;\r\n\r\n  /**\r\n    * Optional. The placeholder text to be displayed in the text field when it is empty.\r\n    */\r\n  placeholder?: string;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field is required.\r\n    */\r\n  required?: boolean;\r\n\r\n  /**\r\n    * Optional. The pattern attribute of the text field. Can be any valid HTML pattern value.\r\n    */\r\n  pattern?: string;\r\n\r\n  /**\r\n    * Optional. The maximum length of the text that can be entered in the text field.\r\n    */\r\n  maxLength?: number;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field should be displayed without a border.\r\n    */\r\n  withoutBorder?: boolean;\r\n\r\n  /**\r\n    * Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.\r\n    */\r\n  overflowTooltipPosition?: 'top' | 'bottom';\r\n\r\n  /**\r\n    * Optional. The size of the text field. Can be 'Small' or 'Medium'.\r\n    */\r\n  size?: Size.Small | Size.Medium;\r\n\r\n  /**\r\n    * Optional. The margin of the text field. Can be any valid CSS margin value.\r\n    */\r\n  margin?: string;\r\n\r\n  /**\r\n    * Optional. A note to be displayed below the text field.\r\n    */\r\n  note?: TextFieldNote;\r\n};\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(({\r\n                                      id,\r\n                                      disabled,\r\n                                      readOnly,\r\n                                      onChange,\r\n                                      value,\r\n                                      validationMessage,\r\n                                      type,\r\n                                      autoComplete,\r\n                                      placeholder,\r\n                                      required,\r\n                                      pattern,\r\n                                      maxLength,\r\n                                      withoutBorder,\r\n                                      state,\r\n                                      size,\r\n                                      margin,\r\n                                      overflowTooltipPosition,\r\n                                      note,\r\n                                      className,\r\n                                      dataTestId,\r\n                                      ...rest\r\n                                    }: TextFieldProps, ref) => {\r\n  const elementRef = useFocusVisibleRef();\r\n  const theme = useTheme();\r\n\r\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n  const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\r\n\r\n  return (\r\n    <>\r\n      <InputWrapper\r\n        $readOnly={readOnly}\r\n        $disabled={disabled}\r\n        $margin={margin}\r\n        onClick={(e: any) => {\r\n          if (disabled || readOnly) {\r\n            e.preventDefault();\r\n          }\r\n        }}>\r\n        <InputFieldStyling\r\n          id={id}\r\n          data-testid={dataTestId}\r\n          ref={elementRef}\r\n          type={type || 'text'}\r\n          value={value ?? ''}\r\n          className={cls}\r\n          tabIndex={readOnly || disabled ? -1 : 0}\r\n          autoComplete={autoComplete}\r\n          placeholder={disabled ? undefined : placeholder}\r\n          disabled={disabled}\r\n          readOnly={readOnly}\r\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n          $activeErrorMessage={!!validationMessage && state !== States.Valid}\r\n          required={required}\r\n          pattern={pattern}\r\n          maxLength={maxLength}\r\n          $withoutBorder={withoutBorder}\r\n          {...rest}\r\n        />\r\n        <TooltipOverflow value={value} position={overflowTooltipPosition} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\r\n          {value}\r\n        </TooltipOverflow>\r\n\r\n        {validationMessage && (\r\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n            {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.generateToken({componentType:'text', defaultVariant:'positive'}, theme)}/> :\r\n              <SystemIcons.TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)}/>}\r\n            <span>{validationMessage}</span>\r\n          </ValidationMessage>\r\n        )}\r\n        {note && !disabled && (\r\n          <NoteMessage className={size}>\r\n            {note.icon}\r\n            <span>{note.message}</span>\r\n          </NoteMessage>\r\n        )}\r\n      </InputWrapper>\r\n    </>\r\n  );\r\n});\r\n\r\nexport default TextField;\r\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAQC,WAAW,QAAO,UAAU;AACpC,SAAQC,MAAM,QAAO,WAAW;AAChC,SAAcC,MAAM,QAAiB,UAAU;AAC/C,SAAQC,iBAAiB,EAAEC,YAAY,EAAEC,WAAW,EAAEC,iBAAiB,QAAO,WAAW;AACzF,SAAQC,kBAAkB,QAAO,WAAW;AAE5C,OAAOC,eAAe,MAAM,6BAA6B;AACzD,SAASC,QAAQ,QAAQ,mBAAmB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAiG7C,MAAMC,SAAS,gBAAGjB,KAAK,CAACkB,UAAU,CAAmC,CAAAC,IAAA,EAsBdC,GAAG,KAAK;EAAA,IAtBO;MAChCC,EAAE;MACFC,QAAQ;MACRC,QAAQ;MACRC,QAAQ;MACRC,KAAK;MACLC,iBAAiB;MACjBC,IAAI;MACJC,YAAY;MACZC,WAAW;MACXC,QAAQ;MACRC,OAAO;MACPC,SAAS;MACTC,aAAa;MACbC,KAAK;MACLC,IAAI;MACJC,MAAM;MACNC,uBAAuB;MACvBC,IAAI;MACJC,SAAS;MACTC;IAEc,CAAC,GAAArB,IAAA;IADZsB,IAAI,GAAAC,wBAAA,CAAAvB,IAAA,EAAAwB,SAAA;EAE3C,MAAMC,UAAU,GAAGpC,kBAAkB,CAAC,CAAC;EACvC,MAAMqC,KAAK,GAAGnC,QAAQ,CAAC,CAAC;EAExBV,KAAK,CAAC8C,mBAAmB,CAAC1B,GAAG,EAAE,MAAMwB,UAAU,CAACG,OAAO,EAAE,CAACH,UAAU,CAAC,CAAC;EAEtE,MAAMI,GAAG,GAAG,GAAGd,KAAK,KAAKR,iBAAiB,GAAGvB,MAAM,CAAC8C,OAAO,GAAG,EAAE,CAAC,IAAId,IAAI,IAAI,EAAE,EAAE;EAEjF,oBACEvB,IAAA,CAAAI,SAAA;IAAAkC,QAAA,eACEpC,KAAA,CAACT,YAAY;MACX8C,SAAS,EAAE5B,QAAS;MACpB6B,SAAS,EAAE9B,QAAS;MACpB+B,OAAO,EAAEjB,MAAO;MAChBkB,OAAO,EAAGC,CAAM,IAAK;QACnB,IAAIjC,QAAQ,IAAIC,QAAQ,EAAE;UACxBgC,CAAC,CAACC,cAAc,CAAC,CAAC;QACpB;MACF,CAAE;MAAAN,QAAA,gBACFtC,IAAA,CAACR,iBAAiB,EAAAqD,aAAA;QAChBpC,EAAE,EAAEA,EAAG;QACP,eAAamB,UAAW;QACxBpB,GAAG,EAAEwB,UAAW;QAChBjB,IAAI,EAAEA,IAAI,IAAI,MAAO;QACrBF,KAAK,EAAEA,KAAK,IAAI,EAAG;QACnBc,SAAS,EAAES,GAAI;QACfU,QAAQ,EAAEnC,QAAQ,IAAID,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;QACxCM,YAAY,EAAEA,YAAa;QAC3BC,WAAW,EAAEP,QAAQ,GAAGqC,SAAS,GAAG9B,WAAY;QAChDP,QAAQ,EAAEA,QAAS;QACnBC,QAAQ,EAAEA,QAAS;QACnBC,QAAQ,EAAG+B,CAAM,IAAK/B,QAAQ,IAAIA,QAAQ,CAAC+B,CAAC,EAAEK,MAAM,EAAEnC,KAAK,IAAI,EAAE,CAAE;QACnEoC,mBAAmB,EAAE,CAAC,CAACnC,iBAAiB,IAAIQ,KAAK,KAAK/B,MAAM,CAAC2D,KAAM;QACnEhC,QAAQ,EAAEA,QAAS;QACnBC,OAAO,EAAEA,OAAQ;QACjBC,SAAS,EAAEA,SAAU;QACrB+B,cAAc,EAAE9B;MAAc,GAC1BQ,IAAI,CACT,CAAC,eACF7B,IAAA,CAACH,eAAe;QAACgB,KAAK,EAAEA,KAAM;QAACuC,QAAQ,EAAE3B,uBAAwB;QAAC4B,KAAK,EAAErB,UAAW;QAACsB,SAAS,EAAE,IAAK;QAACC,QAAQ,EAAC,MAAM;QAAChC,IAAI,EAAEA,IAAK;QAACiC,KAAK,EAAC,KAAK;QAAAlB,QAAA,EAC1IzB;MAAK,CACS,CAAC,EAEjBC,iBAAiB,iBAChBZ,KAAA,CAACP,iBAAiB;QAACgC,SAAS,EAAEJ,IAAI,IAAI,EAAG;QAACR,IAAI,EAAEO,KAAK,IAAI/B,MAAM,CAAC8C,OAAQ;QAAAC,QAAA,GACrEhB,KAAK,KAAK/B,MAAM,CAAC2D,KAAK,gBAAGlD,IAAA,CAACX,WAAW,CAACoE,SAAS;UAACC,KAAK,EAAEpE,MAAM,CAACqE,aAAa,CAAC;YAACC,aAAa,EAAC,MAAM;YAAEC,cAAc,EAAC;UAAU,CAAC,EAAE5B,KAAK;QAAE,CAAC,CAAC,gBACvIjC,IAAA,CAACX,WAAW,CAACyE,gBAAgB;UAACJ,KAAK,EAAEpE,MAAM,CAACqE,aAAa,CAAC;YAACC,aAAa,EAAC,MAAM;YAAEC,cAAc,EAAC;UAAU,CAAC,EAAE5B,KAAK;QAAE,CAAC,CAAC,eACxHjC,IAAA;UAAAsC,QAAA,EAAOxB;QAAiB,CAAO,CAAC;MAAA,CACf,CACpB,EACAY,IAAI,IAAI,CAAChB,QAAQ,iBAChBR,KAAA,CAACR,WAAW;QAACiC,SAAS,EAAEJ,IAAK;QAAAe,QAAA,GAC1BZ,IAAI,CAACqC,IAAI,eACV/D,IAAA;UAAAsC,QAAA,EAAOZ,IAAI,CAACsC;QAAO,CAAO,CAAC;MAAA,CAChB,CACd;IAAA,CACW;EAAC,CACf,CAAC;AAEP,CAAC,CAAC;AAAC3D,SAAA,CAAA4D,SAAA;EA1KDxD,EAAE,EAAAyD,GAAA,CAAAC,MAAA;EAKFzD,QAAQ,EAAAwD,GAAA,CAAAE,IAAA;EAKRzD,QAAQ,EAAAuD,GAAA,CAAAE,IAAA;EAMRxD,QAAQ,EAAAsD,GAAA,CAAAG,IAAA;EAKRxD,KAAK,EAAAqD,GAAA,CAAAC,MAAA;EAKLrD,iBAAiB,EAAAoD,GAAA,CAAAC,MAAA;EAKjBpD,IAAI,EAAAmD,GAAA,CAAAC,MAAA;EAUJnD,YAAY,EAAAkD,GAAA,CAAAC,MAAA;EAKZlD,WAAW,EAAAiD,GAAA,CAAAC,MAAA;EAKXjD,QAAQ,EAAAgD,GAAA,CAAAE,IAAA;EAKRjD,OAAO,EAAA+C,GAAA,CAAAC,MAAA;EAKP/C,SAAS,EAAA8C,GAAA,CAAAI,MAAA;EAKTjD,aAAa,EAAA6C,GAAA,CAAAE,IAAA;EAKb3C,uBAAuB,EAAAyC,GAAA,CAAAK,KAAA,EAAG,KAAK,EAAG,QAAQ;EAU1C/C,MAAM,EAAA0C,GAAA,CAAAC;AAAA;AA2FR,eAAe9D,SAAS","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","state","size","margin","overflowTooltipPosition","note","className","dataTestId","rest","_objectWithoutProperties","_excluded","elementRef","theme","useImperativeHandle","current","cls","Invalid","children","$readOnly","$disabled","$margin","onClick","e","preventDefault","_objectSpread","tabIndex","undefined","target","$activeErrorMessage","Valid","position","input","withArrow","maxWidth","align","CheckMark","color","generateToken","componentType","defaultVariant","TechnicalWarning","icon","message","propTypes","_pt","string","bool","func","number","oneOf"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS} from '../styles';\r\nimport {Size, States, Testable} from '../types';\r\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {TextFieldNote} from './types';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\nimport { useTheme } from 'styled-components';\r\n\r\nexport type TextFieldProps =\r\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id'  | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\r\n  & {\r\n  /**\r\n     * Optional. The ID of the text field.\r\n     */\r\n  id?: string;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field is disabled.\r\n    */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field is read-only.\r\n    */\r\n  readOnly?: boolean;\r\n\r\n  /**\r\n    * Optional. A function to be called when the text in the text field changes.\r\n    * It should take a string representing the new text.\r\n    */\r\n  onChange?: (text: string) => void;\r\n\r\n  /**\r\n    * Optional. The current value of the text field.\r\n    */\r\n  value?: string;\r\n\r\n  /**\r\n    * Optional. The validation message to be displayed when the text field is in an error state.\r\n    */\r\n  validationMessage?: string;\r\n\r\n  /**\r\n    * Optional. The type of the text field. Can be any valid HTML input type.\r\n    */\r\n  type?: string;\r\n\r\n  /**\r\n    * Optional. The state of the text field. Can be 'Invalid' or 'Valid'.\r\n    */\r\n  state?: States.Invalid | States.Valid;\r\n\r\n  /**\r\n    * Optional. The autocomplete attribute of the text field. Can be any valid HTML autocomplete value.\r\n    */\r\n  autoComplete?: string;\r\n\r\n  /**\r\n    * Optional. The placeholder text to be displayed in the text field when it is empty.\r\n    */\r\n  placeholder?: string;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field is required.\r\n    */\r\n  required?: boolean;\r\n\r\n  /**\r\n    * Optional. The pattern attribute of the text field. Can be any valid HTML pattern value.\r\n    */\r\n  pattern?: string;\r\n\r\n  /**\r\n    * Optional. The maximum length of the text that can be entered in the text field.\r\n    */\r\n  maxLength?: number;\r\n\r\n  /**\r\n    * Optional. 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                                      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          {...rest}\r\n        />\r\n        <TooltipOverflow value={value} position={overflowTooltipPosition} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\r\n          {value}\r\n        </TooltipOverflow>\r\n\r\n        {validationMessage && (\r\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n            {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.generateToken({componentType:'text', defaultVariant:'positive'}, theme)}/> :\r\n              <SystemIcons.TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, theme)}/>}\r\n            <span>{validationMessage}</span>\r\n          </ValidationMessage>\r\n        )}\r\n        {note && !disabled && (\r\n          <NoteMessage className={size}>\r\n            {note.icon}\r\n            <span>{note.message}</span>\r\n          </NoteMessage>\r\n        )}\r\n      </InputWrapper>\r\n    </>\r\n  );\r\n});\r\n\r\nexport default TextField;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/__tests__/NumberField.test.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import {render} from '../../test-utils';
+import {Size, States} from '../../types';
+import 'jest-styled-components';
+import {COLORS, NumberField} from '../..';
+
+
+describe('<NumberField />', () => {
+
+    it('renders note field', async () => {
+        const { getByText } = render(
+            <NumberField type='NumberField'  note='test note' size={Size.Medium}/>
+        );
+        expect(getByText('test note')).toBeDefined();
+    });
+
+    it('renders required asterisk', async () => {
+        const { queryByTestId } = render(
+            <NumberField type='NumberField' dataTestId='numberInput' required size={Size.Medium}/>
+        );
+        expect(queryByTestId('labelIcon')).toBeDefined();
+    });
+
+    it('does not renders required asterisk', async () => {
+        const { queryByTestId } = render(
+            <NumberField type='NumberField' dataTestId='numberInput'  size={Size.Medium}/>
+        );
+        expect(queryByTestId('labelIcon')).toBeNull();
+    });
+
+    it('renders positive note and input container', async () => {
+        const { container, getByTestId } = render(
+            <NumberField type='NumberField' dataTestId='numberInput' note='test note' state={States.Valid} size={Size.Medium}/>
+        );
+        expect(container.getElementsByClassName('valid').length).toBe(1);
+    });
+
+    it('renders warning note and input container', async () => {
+        const { container, getByTestId } = render(
+            <NumberField type='NumberField' dataTestId='numberInput' note='test note' state={States.Invalid} size={Size.Medium}/>
+        );
+        expect(container.getElementsByClassName('invalid').length).toBe(1);
+    });
+
+    it('renders correct disabled input container', async () => {
+        const { getByTestId } = render(
+            <NumberField type='NumberField' dataTestId='numberInput' size={Size.Small}/>
+        );
+        expect(getByTestId('numberInput')).toHaveStyleRule('cursor', `not-allowed`, {modifier:'&.disabled'});
+    });
+
+    it('renders correct readonly input container', async () => {
+        const { getByTestId } = render(
+            <NumberField type='NumberField' dataTestId='numberInput' size={Size.Small}/>
+        );
+        expect(getByTestId('numberInput')).toHaveStyleRule('cursor', `not-allowed`, {modifier:'&.readOnly'});
+    });
+
+    it('renders operators in the input container', async () => {
+        const { getByTestId } = render(
+            <NumberField type='NumberField' dataTestId='numberInput' size={Size.Medium}/>
+        );
+        expect(getByTestId('operators').childElementCount).toBe(3);
+        expect(getByTestId('operators').firstChild).toBeDefined();
+        expect(getByTestId('operators').lastChild).toBeDefined();
+    })
+})

package/dist/InputFields/__tests__/NumberInput.test.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import {Size, States} from '../../types';
+import 'jest-styled-components';
+import { COLORS, NumberField } from '../..';
+
+
+describe('<NumberField />', () => {
+
+    it('renders note field', async () => {
+        const { getByText } = render(
+            <NumberField type='NumberInput'  note='test note' size={Size.Medium}/>
+        );
+        expect(getByText('test note')).toBeDefined();
+    });
+
+    it('renders required asterisk', async () => {
+        const { queryByTestId } = render(
+            <NumberField type='NumberInput'  required size={Size.Medium}/>
+        );
+        expect(queryByTestId('labelIcon')).toBeDefined();
+    });
+
+    it('does not renders required asterisk', async () => {
+        const { queryByTestId } = render(
+            <NumberField type='NumberInput'  size={Size.Medium}/>
+        );
+        expect(queryByTestId('labelIcon')).toBeNull();
+    });
+
+    it('renders positive note and input container', async () => {
+        const { container, getByTestId } = render(
+            <NumberField type='NumberInput' dataTestId='numberInput' note='test note' state={States.Valid} size={Size.Medium}/>
+        );
+        expect(container.getElementsByClassName('valid').length).toBe(1);
+    });
+
+    it('renders warning note and input container', async () => {
+        const { container, getByTestId } = render(
+            <NumberField type='NumberInput' dataTestId='numberInput' note='test note' state={States.Invalid} size={Size.Medium}/>
+        );
+        expect(container.getElementsByClassName('invalid').length).toBe(1);
+    });
+
+    it('renders correct disabled input container', async () => {
+        const { getByTestId } = render(
+            <NumberField type='NumberInput' dataTestId='numberInput'  size={Size.Small}/>
+        );
+        expect(getByTestId('numberInput')).toHaveStyleRule('cursor', `not-allowed`, {modifier:'&.disabled'});
+    });
+
+    it('renders correct readonly input container', async () => {
+        const { getByTestId } = render(
+            <NumberField type='NumberInput' dataTestId='numberInput'  size={Size.Small}/>
+        );
+        expect(getByTestId('numberInput')).toHaveStyleRule('cursor', `not-allowed`, {modifier:'&.readOnly'});
+    });
+
+    it('renders operators in the input container', async () => {
+        const { getByTestId } = render(
+            <NumberField type='NumberInput' size={Size.Medium}/>
+        );
+        expect(getByTestId('leftOperator')).toHaveStyleRule('left', '0');
+        expect(getByTestId('leftOperator')).toHaveStyleRule('top', '4px');
+        expect(getByTestId('rightOperator')).toHaveStyleRule('right', '0');
+        expect(getByTestId('rightOperator')).toHaveStyleRule('top', '4px');
+    })
+})

package/dist/InputFields/__tests__/QuickSearch.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { findByTestId, render } from '../../test-utils';
+import {Size} from '../../types';
+import 'jest-styled-components';
+import { QuickSearch } from '..';
+import { ThemeProvider } from 'styled-components';
+
+describe('<QuickSearch />', () => {
+
+
+  it('Renders quick search', async () => {
+    let search = '';
+    let searchEntered = false;
+    const { queryByText, getByTestId, queryAllByTestId, container } = render(
+      <ThemeProvider theme={{}}>
+      <div style={{ width: '400px' }}>
+        <QuickSearch
+          id="QuickSearch"
+          size={Size.Small}
+          enterSearch={() => {
+            searchEntered = true;
+          }}
+          removeSearch={() => {
+            search = '';
+          }}
+          setSearchTerm={(term) => {
+            search = term;
+          }}
+        />
+      </div></ThemeProvider>,
+    );
+    expect(getByTestId('QuickSearch_main').classList.contains('small')).toBeTruthy();
+    expect(getByTestId('QuickSearch_Searchbutton')).toBeDefined();
+
+    // Test click on icon and check that input field shows
+    expect(queryAllByTestId('QuickSearch').length).toBe(0);
+    (await findByTestId(container, 'QuickSearch_Searchbutton') as HTMLButtonElement)?.click();
+    expect(await findByTestId(container, 'QuickSearch_main')).toBeDefined();
+    expect(getByTestId('QuickSearch_main').classList.contains('expanded')).toBeTruthy();
+    expect(getByTestId('QuickSearch_Clearicon').parentElement).toHaveProperty('hidden');
+  });
+});

package/dist/InputFields/components/SearchBarInput.cjs

@@ -99,6 +99,11 @@ const Search = exports.Search = _styledComponents.default.input.attrs(() => ({
     }
   }
 
+  background: ${props => _index.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
+
   &:disabled {
     background: transparent;
     border: none;

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBarInput.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_index","_styles","_common","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Search","exports","styled","input","attrs","type","props","ComponentSStyling","ComponentTextStyle","Italic","COLORS","generateToken","componentType","defaultVariant","theme","Regular","BREAKPOINTS","MEDIUM","ComponentMStyling","SearchBarInput","forwardRef","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","useFocusVisibleRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","key","preventDefault","stopPropagation","jsx","className","tabIndex","onChange","target","value","onKeyPress","propTypes","_propTypes","string","isRequired","func","bool","array","_default"],"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\r\nimport { Size } from '../../types';\r\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\r\nimport { useFocusVisibleRef } from '../../common';\r\n\r\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\r\n  appearance: none;\r\n  width: calc(100% - 96px);\r\n\r\n  /* To prevent browser putting its own cross inside the search bar */\r\n\r\n  &::-ms-clear {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n\r\n  &::-ms-reveal {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n\r\n  &::-webkit-search-decoration,\r\n  &::-webkit-search-cancel-button,\r\n  &::-webkit-search-results-button,\r\n  &::-webkit-search-results-decoration {\r\n    display: none;\r\n  }\r\n\r\n  &::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  height: 32px;\r\n  border-width: 0;\r\n  margin-left: 48px;\r\n  outline: none;\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n  ::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    margin-left: 44px;\r\n\r\n    ::placeholder {\r\n      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    margin-left: 48px;\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n    \r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    background: transparent;\r\n    border: none;\r\n  }\r\n`;\r\n\r\ntype SearchBarInputProps = {\r\n  id: string;\r\n  searchTerm?: string;\r\n  setSearchTerm: (term: string) => void;\r\n  enterSearch: (e: any) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  size?: Size.Small | Size.Medium;\r\n  onBlur?: (e: any) => void;\r\n  focusParentRefs?: React.RefObject<any>[];\r\n  onClick?: ()=>void;\r\n};\r\n\r\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\r\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\r\n\r\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\r\n\r\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\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  return (\r\n    <Search\r\n      placeholder={disabled ? '' : placeholder}\r\n      ref={elementRef}\r\n      id={id}\r\n      data-testid={id}\r\n      className={size ? size : ''}\r\n      tabIndex={0}\r\n      disabled={disabled}\r\n      onChange={(e: any) => setSearchTerm(e.target.value)}\r\n      value={searchTerm}\r\n      onBlur={(e) => onBlur && onBlur(e)}\r\n      onKeyDown={onKeyDown}\r\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\r\n      onClick={onClick}\r\n    />\r\n  );\r\n});\r\n\r\nexport default SearchBarInput;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchBarInput.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_index","_styles","_common","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Search","exports","styled","input","attrs","type","props","ComponentSStyling","ComponentTextStyle","Italic","COLORS","generateToken","componentType","defaultVariant","theme","Regular","BREAKPOINTS","MEDIUM","ComponentMStyling","SearchBarInput","forwardRef","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","useFocusVisibleRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","key","preventDefault","stopPropagation","jsx","className","tabIndex","onChange","target","value","onKeyPress","propTypes","_propTypes","string","isRequired","func","bool","array","_default"],"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\r\nimport { Size } from '../../types';\r\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\r\nimport { useFocusVisibleRef } from '../../common';\r\n\r\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\r\n  appearance: none;\r\n  width: calc(100% - 96px);\r\n\r\n  /* To prevent browser putting its own cross inside the search bar */\r\n\r\n  &::-ms-clear {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n\r\n  &::-ms-reveal {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n\r\n  &::-webkit-search-decoration,\r\n  &::-webkit-search-cancel-button,\r\n  &::-webkit-search-results-button,\r\n  &::-webkit-search-results-decoration {\r\n    display: none;\r\n  }\r\n\r\n  &::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  height: 32px;\r\n  border-width: 0;\r\n  margin-left: 48px;\r\n  outline: none;\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n  ::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    margin-left: 44px;\r\n\r\n    ::placeholder {\r\n      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    margin-left: 48px;\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n    \r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  background: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, props.theme)};\r\n\r\n  &:disabled {\r\n    background: transparent;\r\n    border: none;\r\n  }\r\n`;\r\n\r\ntype SearchBarInputProps = {\r\n  id: string;\r\n  searchTerm?: string;\r\n  setSearchTerm: (term: string) => void;\r\n  enterSearch: (e: any) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  size?: Size.Small | Size.Medium;\r\n  onBlur?: (e: any) => void;\r\n  focusParentRefs?: React.RefObject<any>[];\r\n  onClick?: ()=>void;\r\n};\r\n\r\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\r\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\r\n\r\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\r\n\r\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\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  return (\r\n    <Search\r\n      placeholder={disabled ? '' : placeholder}\r\n      ref={elementRef}\r\n      id={id}\r\n      data-testid={id}\r\n      className={size ? size : ''}\r\n      tabIndex={0}\r\n      disabled={disabled}\r\n      onChange={(e: any) => setSearchTerm(e.target.value)}\r\n      value={searchTerm}\r\n      onBlur={(e) => onBlur && onBlur(e)}\r\n      onKeyDown={onKeyDown}\r\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\r\n      onClick={onClick}\r\n    />\r\n  );\r\n});\r\n\r\nexport default SearchBarInput;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/components/SearchBarInput.js

@@ -90,6 +90,11 @@ export const Search = styled.input.attrs(() => ({
     }
   }
 
+  background: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
+
   &:disabled {
     background: transparent;
     border: none;

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

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