@laerdal/life-react-components 5.0.8-dev.2.full → 5.0.9

package/dist/InputFields/Textarea.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-const _excluded = ["id", "placeholder", "state", "value", "size", "disabled", "validationMessage", "onChange", "margin", "autoHeight", "note", "required", "className", "dataTestId"];
+var _excluded = ["id", "placeholder", "state", "value", "size", "disabled", "validationMessage", "onChange", "margin", "autoHeight", "note", "required", "className", "dataTestId"];
 var _templateObject, _templateObject2;
 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; }
@@ -30,31 +30,68 @@ import { ComponentMStyling, ComponentTextStyle } from '../styles';
 import { useFocusVisibleRef } from "../common";
 
 // Add component-specific styles.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const TextareaWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  ", "\n"])), props => props.$margin ? "margin: ".concat(props.$margin, ";") : '');
-const TextArea = styled.textarea(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: block;\n  background: ", ";\n  border-radius: 4px;\n  outline: none;\n  margin-bottom: 4px;\n  padding: 16px;\n  border: none;\n  box-shadow: inset 0 0 0 1px ", ";\n\n  resize: ", ";\n\n  ", "\n  &.small {\n    ", "\n    width: 304px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    &::placeholder {\n      ", "\n    }\n    width: 344px;\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:read-only:not(:disabled) {\n    ", "\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    border: 1px solid ", ";\n    box-shadow: none !important;\n    color: ", " !important;\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  &::placeholder {\n    ", "\n  }\n"])), props => COLORS.getColor('white', props.theme), props => COLORS.getColor('neutral_400', props.theme), props => props.$autoHeight ? 'none' : '', props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme)), props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme)), props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme)), props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme)), props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme)), props => COLORS.getColor('primary_800', props.theme), focusStyles, props => COLORS.getColor('critical_500', props.theme), props => COLORS.getColor('correct_500', props.theme), props => COLORS.getColor('primary_700', props.theme), props => COLORS.getColor('primary_800', props.theme), readOnlyState, props => COLORS.getColor('neutral_100', props.theme), props => COLORS.getColor('neutral_300', props.theme), props => COLORS.getColor('neutral_300', props.theme), props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme)));
-const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-      id,
-      placeholder,
-      state,
-      value,
-      size,
-      disabled,
-      validationMessage,
-      onChange,
-      margin,
-      autoHeight,
-      note,
-      required,
-      className,
-      dataTestId
-    } = _ref,
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var TextareaWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  ", "\n"])), function (props) {
+  return props.$margin ? "margin: ".concat(props.$margin, ";") : '';
+});
+var TextArea = styled.textarea(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: block;\n  background: ", ";\n  border-radius: 4px;\n  outline: none;\n  margin-bottom: 4px;\n  padding: 16px;\n  border: none;\n  box-shadow: inset 0 0 0 1px ", ";\n\n  resize: ", ";\n\n  ", "\n  &.small {\n    ", "\n    width: 304px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    &::placeholder {\n      ", "\n    }\n    width: 344px;\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:read-only:not(:disabled) {\n    ", "\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    border: 1px solid ", ";\n    box-shadow: none !important;\n    color: ", " !important;\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  &::placeholder {\n    ", "\n  }\n"])), function (props) {
+  return COLORS.getColor('white', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_400', props.theme);
+}, function (props) {
+  return props.$autoHeight ? 'none' : '';
+}, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme));
+}, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme));
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, focusStyles, function (props) {
+  return COLORS.getColor('critical_500', props.theme);
+}, function (props) {
+  return COLORS.getColor('correct_500', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_700', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, readOnlyState, function (props) {
+  return COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme));
+});
+var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var id = _ref.id,
+    placeholder = _ref.placeholder,
+    state = _ref.state,
+    value = _ref.value,
+    size = _ref.size,
+    disabled = _ref.disabled,
+    validationMessage = _ref.validationMessage,
+    _onChange = _ref.onChange,
+    margin = _ref.margin,
+    autoHeight = _ref.autoHeight,
+    note = _ref.note,
+    required = _ref.required,
+    className = _ref.className,
+    dataTestId = _ref.dataTestId,
     rest = _objectWithoutProperties(_ref, _excluded);
-  const elementRef = useFocusVisibleRef();
-  const theme = useTheme();
-  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);
-  const cls = "".concat(size, " ").concat(state || (validationMessage ? States.Invalid : ''), " ").concat(className || '');
+  var elementRef = useFocusVisibleRef();
+  var theme = useTheme();
+  React.useImperativeHandle(ref, function () {
+    return elementRef.current;
+  }, [elementRef]);
+  var cls = "".concat(size, " ").concat(state || (validationMessage ? States.Invalid : ''), " ").concat(className || '');
   return /*#__PURE__*/_jsxs(TextareaWrapper, {
     children: [/*#__PURE__*/_jsx(TextArea, _objectSpread({
       id: id,
@@ -65,9 +102,9 @@ const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       $autoHeight: autoHeight,
       className: cls,
       disabled: disabled,
-      onChange: e => {
+      onChange: function onChange(e) {
         var _e$target;
-        return onChange && onChange((e === null || e === void 0 || (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '');
+        return _onChange && _onChange((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '');
       },
       required: required
     }, rest)), validationMessage && /*#__PURE__*/_jsxs(ValidationMessage, {

package/dist/InputFields/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":["React","COLORS","ComponentSStyling","focusStyles","NoteMessage","readOnlyState","ValidationMessage","States","SystemIcons","styled","useTheme","ComponentMStyling","ComponentTextStyle","useFocusVisibleRef","jsx","_jsx","jsxs","_jsxs","TextareaWrapper","div","_templateObject","_taggedTemplateLiteral","props","$margin","concat","TextArea","textarea","_templateObject2","getColor","theme","$autoHeight","Regular","Italic","Textarea","forwardRef","_ref","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","margin","autoHeight","note","required","className","dataTestId","rest","_objectWithoutProperties","_excluded","elementRef","useImperativeHandle","current","cls","Invalid","children","_objectSpread","undefined","e","_e$target","target","type","Valid","CheckMark","color","TechnicalWarning","icon","message"],"sources":["../../src/InputFields/Textarea.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {COLORS, ComponentSStyling, focusStyles} from '../styles';\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from './styling';\r\nimport { States } from '../types';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport { SystemIcons } from '../icons';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\r\nimport { TextareaProps, TextFieldNote } from './types';\r\nimport {useFocusVisibleRef} from \"../common\";\r\n\r\n// Add component-specific styles.\r\nconst TextareaWrapper = styled.div<{ $margin?: string }>`\r\n  width: 100%;\r\n  ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n`;\r\nconst TextArea = styled.textarea<{ $autoHeight?: boolean }>`\r\n  display: block;\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  border-radius: 4px;\r\n  outline: none;\r\n  margin-bottom: 4px;\r\n  padding: 16px;\r\n  border: none;\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n\r\n  resize: ${(props) => (props.$autoHeight ? 'none' : '')};\r\n\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    width: 304px;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n    width: 344px;\r\n  }\r\n\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &.focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.invalid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_500', props.theme)};\r\n  }\r\n\r\n  &.valid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('correct_500', props.theme)};\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &:read-only:not(:disabled) {\r\n    ${readOnlyState}\r\n  }\r\n\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n    border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    box-shadow: none !important;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n\r\n    &::placeholder {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &::placeholder {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n`;\r\n\r\nconst Textarea = React.forwardRef<any, TextareaProps>(({\r\n  id,\r\n  placeholder,\r\n  state,\r\n  value,\r\n  size,\r\n  disabled,\r\n  validationMessage,\r\n  onChange,\r\n  margin,\r\n  autoHeight,\r\n  note,\r\n  required,\r\n  className,\r\n  dataTestId,\r\n  ...rest\r\n}: TextareaProps, ref) => {\r\n\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 = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\r\n  return (\r\n    <TextareaWrapper>\r\n      <TextArea\r\n        id={id}\r\n        data-testid={dataTestId}\r\n        ref={elementRef}\r\n        value={value}\r\n        placeholder={disabled ? undefined : placeholder}\r\n        $autoHeight={autoHeight}\r\n        className={cls}\r\n        disabled={disabled}\r\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n        required={required}\r\n        {...rest}\r\n      />\r\n      {validationMessage && (\r\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n          {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.getColor('correct_400', theme)} /> : <SystemIcons.TechnicalWarning color={COLORS.getColor('critical_400', theme)} />}\r\n          <span>{validationMessage}</span>\r\n        </ValidationMessage>\r\n      )}\r\n      {note && !disabled && (\r\n        <NoteMessage className={size}>\r\n          {note.icon}\r\n          <span>{note.message}</span>\r\n        </NoteMessage>\r\n      )}\r\n    </TextareaWrapper>\r\n  );\r\n});\r\n\r\nexport default Textarea;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Textarea.js","names":["React","COLORS","ComponentSStyling","focusStyles","NoteMessage","readOnlyState","ValidationMessage","States","SystemIcons","styled","useTheme","ComponentMStyling","ComponentTextStyle","useFocusVisibleRef","jsx","_jsx","jsxs","_jsxs","TextareaWrapper","div","_templateObject","_taggedTemplateLiteral","props","$margin","concat","TextArea","textarea","_templateObject2","getColor","theme","$autoHeight","Regular","Italic","Textarea","forwardRef","_ref","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","margin","autoHeight","note","required","className","dataTestId","rest","_objectWithoutProperties","_excluded","elementRef","useImperativeHandle","current","cls","Invalid","children","_objectSpread","undefined","e","_e$target","target","type","Valid","CheckMark","color","TechnicalWarning","icon","message"],"sources":["../../src/InputFields/Textarea.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {COLORS, ComponentSStyling, focusStyles} from '../styles';\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from './styling';\r\nimport { States } from '../types';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport { SystemIcons } from '../icons';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\r\nimport { TextareaProps, TextFieldNote } from './types';\r\nimport {useFocusVisibleRef} from \"../common\";\r\n\r\n// Add component-specific styles.\r\nconst TextareaWrapper = styled.div<{ $margin?: string }>`\r\n  width: 100%;\r\n  ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n`;\r\nconst TextArea = styled.textarea<{ $autoHeight?: boolean }>`\r\n  display: block;\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  border-radius: 4px;\r\n  outline: none;\r\n  margin-bottom: 4px;\r\n  padding: 16px;\r\n  border: none;\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n\r\n  resize: ${(props) => (props.$autoHeight ? 'none' : '')};\r\n\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    width: 304px;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n    width: 344px;\r\n  }\r\n\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &.focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.invalid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_500', props.theme)};\r\n  }\r\n\r\n  &.valid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('correct_500', props.theme)};\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &:read-only:not(:disabled) {\r\n    ${readOnlyState}\r\n  }\r\n\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n    border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    box-shadow: none !important;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n\r\n    &::placeholder {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &::placeholder {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n`;\r\n\r\nconst Textarea = React.forwardRef<any, TextareaProps>(({\r\n  id,\r\n  placeholder,\r\n  state,\r\n  value,\r\n  size,\r\n  disabled,\r\n  validationMessage,\r\n  onChange,\r\n  margin,\r\n  autoHeight,\r\n  note,\r\n  required,\r\n  className,\r\n  dataTestId,\r\n  ...rest\r\n}: TextareaProps, ref) => {\r\n\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 = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\r\n  return (\r\n    <TextareaWrapper>\r\n      <TextArea\r\n        id={id}\r\n        data-testid={dataTestId}\r\n        ref={elementRef}\r\n        value={value}\r\n        placeholder={disabled ? undefined : placeholder}\r\n        $autoHeight={autoHeight}\r\n        className={cls}\r\n        disabled={disabled}\r\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n        required={required}\r\n        {...rest}\r\n      />\r\n      {validationMessage && (\r\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n          {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.getColor('correct_400', theme)} /> : <SystemIcons.TechnicalWarning color={COLORS.getColor('critical_400', theme)} />}\r\n          <span>{validationMessage}</span>\r\n        </ValidationMessage>\r\n      )}\r\n      {note && !disabled && (\r\n        <NoteMessage className={size}>\r\n          {note.icon}\r\n          <span>{note.message}</span>\r\n        </NoteMessage>\r\n      )}\r\n    </TextareaWrapper>\r\n  );\r\n});\r\n\r\nexport default Textarea;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/components/SearchBarInput.cjs

@@ -1,10 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Search = void 0;
+exports["default"] = exports.Search = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
@@ -14,27 +15,44 @@ var _styles = require("../../styles");
 var _common = require("../../common");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
-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; }
-const Search = exports.Search = _styledComponents.default.input.attrs(() => ({
-  type: 'search'
-}))(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  appearance: none;\n  width: calc(100% - 96px);\n\n  /* To prevent browser putting its own cross inside the search bar */\n\n  &::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  &::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  &::placeholder {\n    ", "\n  }\n\n  height: 32px;\n  border-width: 0;\n  margin-left: 48px;\n  outline: none;\n\n  ", "\n  ::placeholder {\n    ", "\n  }\n\n  ", " {\n    ::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    margin-left: 44px;\n\n    ::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    margin-left: 48px;\n    ", "\n    \n    ::placeholder {\n      ", "\n    }\n  }\n\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n"])), props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_500', props.theme)), props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.getColor('black', props.theme)), props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_600', props.theme)), _index.BREAKPOINTS.MEDIUM, props => (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_600', props.theme)), props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_600', props.theme)), props => (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.getColor('black', props.theme)), props => (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_600', props.theme)));
-const SearchBarInput = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    id,
-    searchTerm,
-    setSearchTerm,
-    enterSearch,
-    placeholder,
-    disabled,
-    onKeyDown,
-    size,
-    onBlur,
-    onClick
-  } = props;
-  const elementRef = (0, _common.useFocusVisibleRef)(props.focusParentRefs || []);
-  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);
-  const isPressingEnter = e => {
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+var Search = _styledComponents["default"].input.attrs(function () {
+  return {
+    type: 'search'
+  };
+})(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  appearance: none;\n  width: calc(100% - 96px);\n\n  /* To prevent browser putting its own cross inside the search bar */\n\n  &::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  &::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  &::placeholder {\n    ", "\n  }\n\n  height: 32px;\n  border-width: 0;\n  margin-left: 48px;\n  outline: none;\n\n  ", "\n  ::placeholder {\n    ", "\n  }\n\n  ", " {\n    ::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    margin-left: 44px;\n\n    ::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    margin-left: 48px;\n    ", "\n    \n    ::placeholder {\n      ", "\n    }\n  }\n\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n"])), function (props) {
+  return (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_500', props.theme));
+}, function (props) {
+  return (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.getColor('black', props.theme));
+}, function (props) {
+  return (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_600', props.theme));
+}, _index.BREAKPOINTS.MEDIUM, function (props) {
+  return (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_600', props.theme));
+}, function (props) {
+  return (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_600', props.theme));
+}, function (props) {
+  return (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.getColor('black', props.theme));
+}, function (props) {
+  return (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_600', props.theme));
+});
+exports.Search = Search;
+var SearchBarInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var id = props.id,
+    searchTerm = props.searchTerm,
+    setSearchTerm = props.setSearchTerm,
+    enterSearch = props.enterSearch,
+    placeholder = props.placeholder,
+    disabled = props.disabled,
+    onKeyDown = props.onKeyDown,
+    size = props.size,
+    _onBlur = props.onBlur,
+    onClick = props.onClick;
+  var elementRef = (0, _common.useFocusVisibleRef)(props.focusParentRefs || []);
+  React.useImperativeHandle(ref, function () {
+    return elementRef.current;
+  }, [elementRef]);
+  var isPressingEnter = function isPressingEnter(e) {
     if (e.key === 'Enter') {
       e.preventDefault();
       e.stopPropagation();
@@ -50,25 +68,32 @@ const SearchBarInput = /*#__PURE__*/React.forwardRef((props, ref) => {
     className: size ? size : '',
     tabIndex: 0,
     disabled: disabled,
-    onChange: e => setSearchTerm(e.target.value),
+    onChange: function onChange(e) {
+      return setSearchTerm(e.target.value);
+    },
     value: searchTerm,
-    onBlur: e => onBlur && onBlur(e),
+    onBlur: function onBlur(e) {
+      return _onBlur && _onBlur(e);
+    },
     onKeyDown: onKeyDown,
-    onKeyPress: e => isPressingEnter(e) ? enterSearch(e) : null,
+    onKeyPress: function onKeyPress(e) {
+      return isPressingEnter(e) ? enterSearch(e) : null;
+    },
     onClick: onClick
   });
 });
 SearchBarInput.propTypes = {
-  id: _propTypes.default.string.isRequired,
-  searchTerm: _propTypes.default.string,
-  setSearchTerm: _propTypes.default.func.isRequired,
-  enterSearch: _propTypes.default.func.isRequired,
-  placeholder: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
-  onKeyDown: _propTypes.default.func,
-  onBlur: _propTypes.default.func,
-  focusParentRefs: _propTypes.default.array,
-  onClick: _propTypes.default.func
+  id: _propTypes["default"].string.isRequired,
+  searchTerm: _propTypes["default"].string,
+  setSearchTerm: _propTypes["default"].func.isRequired,
+  enterSearch: _propTypes["default"].func.isRequired,
+  placeholder: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  onKeyDown: _propTypes["default"].func,
+  onBlur: _propTypes["default"].func,
+  focusParentRefs: _propTypes["default"].array,
+  onClick: _propTypes["default"].func
 };
-var _default = exports.default = SearchBarInput;
+var _default = SearchBarInput;
+exports["default"] = _default;
 //# sourceMappingURL=SearchBarInput.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBarInput.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_index","_styles","_common","_jsxRuntime","_templateObject","_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","_taggedTemplateLiteral2","props","ComponentSStyling","ComponentTextStyle","Italic","COLORS","getColor","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.getColor('neutral_500', 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.getColor('black', props.theme))}\r\n  ::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', 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.getColor('neutral_600', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    margin-left: 48px;\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    \r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', 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","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Search","styled","input","attrs","type","_taggedTemplateLiteral2","props","ComponentSStyling","ComponentTextStyle","Italic","COLORS","getColor","theme","Regular","BREAKPOINTS","MEDIUM","ComponentMStyling","exports","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.getColor('neutral_500', 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.getColor('black', props.theme))}\r\n  ::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', 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.getColor('neutral_600', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    margin-left: 48px;\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    \r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', 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":[]}

package/dist/InputFields/components/SearchBarInput.js

@@ -7,25 +7,41 @@ import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';
 import { ComponentMStyling, ComponentSStyling } from '../../styles';
 import { useFocusVisibleRef } from '../../common';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Search = styled.input.attrs(() => ({
-  type: 'search'
-}))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  appearance: none;\n  width: calc(100% - 96px);\n\n  /* To prevent browser putting its own cross inside the search bar */\n\n  &::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  &::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  &::placeholder {\n    ", "\n  }\n\n  height: 32px;\n  border-width: 0;\n  margin-left: 48px;\n  outline: none;\n\n  ", "\n  ::placeholder {\n    ", "\n  }\n\n  ", " {\n    ::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    margin-left: 44px;\n\n    ::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    margin-left: 48px;\n    ", "\n    \n    ::placeholder {\n      ", "\n    }\n  }\n\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n"])), props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme)), props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme)), props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme)), BREAKPOINTS.MEDIUM, props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme)), props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme)), props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme)), props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme)));
-const SearchBarInput = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    id,
-    searchTerm,
-    setSearchTerm,
-    enterSearch,
-    placeholder,
-    disabled,
-    onKeyDown,
-    size,
-    onBlur,
-    onClick
-  } = props;
-  const elementRef = useFocusVisibleRef(props.focusParentRefs || []);
-  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);
-  const isPressingEnter = e => {
+export var Search = styled.input.attrs(function () {
+  return {
+    type: 'search'
+  };
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  appearance: none;\n  width: calc(100% - 96px);\n\n  /* To prevent browser putting its own cross inside the search bar */\n\n  &::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  &::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  &::placeholder {\n    ", "\n  }\n\n  height: 32px;\n  border-width: 0;\n  margin-left: 48px;\n  outline: none;\n\n  ", "\n  ::placeholder {\n    ", "\n  }\n\n  ", " {\n    ::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    margin-left: 44px;\n\n    ::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    margin-left: 48px;\n    ", "\n    \n    ::placeholder {\n      ", "\n    }\n  }\n\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n"])), function (props) {
+  return ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme));
+}, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme));
+}, BREAKPOINTS.MEDIUM, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme));
+}, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme));
+}, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme));
+});
+var SearchBarInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var id = props.id,
+    searchTerm = props.searchTerm,
+    setSearchTerm = props.setSearchTerm,
+    enterSearch = props.enterSearch,
+    placeholder = props.placeholder,
+    disabled = props.disabled,
+    onKeyDown = props.onKeyDown,
+    size = props.size,
+    _onBlur = props.onBlur,
+    onClick = props.onClick;
+  var elementRef = useFocusVisibleRef(props.focusParentRefs || []);
+  React.useImperativeHandle(ref, function () {
+    return elementRef.current;
+  }, [elementRef]);
+  var isPressingEnter = function isPressingEnter(e) {
     if (e.key === 'Enter') {
       e.preventDefault();
       e.stopPropagation();
@@ -41,11 +57,17 @@ const SearchBarInput = /*#__PURE__*/React.forwardRef((props, ref) => {
     className: size ? size : '',
     tabIndex: 0,
     disabled: disabled,
-    onChange: e => setSearchTerm(e.target.value),
+    onChange: function onChange(e) {
+      return setSearchTerm(e.target.value);
+    },
     value: searchTerm,
-    onBlur: e => onBlur && onBlur(e),
+    onBlur: function onBlur(e) {
+      return _onBlur && _onBlur(e);
+    },
     onKeyDown: onKeyDown,
-    onKeyPress: e => isPressingEnter(e) ? enterSearch(e) : null,
+    onKeyPress: function onKeyPress(e) {
+      return isPressingEnter(e) ? enterSearch(e) : null;
+    },
     onClick: onClick
   });
 });

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","_templateObject","_taggedTemplateLiteral","props","Italic","getColor","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.getColor('neutral_500', 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.getColor('black', props.theme))}\r\n  ::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', 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.getColor('neutral_600', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    margin-left: 48px;\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    \r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', 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":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,WAAW,EAAEC,MAAM,EAAEC,kBAAkB,QAAQ,oBAAoB;AAE5E,SAASC,iBAAiB,EAAEC,iBAAiB,QAAQ,cAAc;AACnE,SAASC,kBAAkB,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAElD,OAAO,MAAMC,MAAM,GAAGT,MAAM,CAACU,KAAK,CAACC,KAAK,CAAC,OAAO;EAAEC,IAAI,EAAE;AAAS,CAAC,CAAC,CAAC,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,26BA0B9DC,KAAK,IAAIV,iBAAiB,CAACF,kBAAkB,CAACa,MAAM,EAAEd,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC,EAQpGH,KAAK,IAAIV,iBAAiB,CAACF,kBAAkB,CAACgB,OAAO,EAAEjB,MAAM,CAACe,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC,EAE3FH,KAAK,IAAIV,iBAAiB,CAACF,kBAAkB,CAACa,MAAM,EAAEd,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC,EAGpGjB,WAAW,CAACmB,MAAM,EAEdL,KAAK,IAAIX,iBAAiB,CAACD,kBAAkB,CAACa,MAAM,EAAEd,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC,EAQlGH,KAAK,IAAIV,iBAAiB,CAACF,kBAAkB,CAACa,MAAM,EAAEd,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC,EAMpGH,KAAK,IAAIX,iBAAiB,CAACD,kBAAkB,CAACgB,OAAO,EAAEjB,MAAM,CAACe,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC,EAG3FH,KAAK,IAAIX,iBAAiB,CAACD,kBAAkB,CAACa,MAAM,EAAEd,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC,CAQzG;AAgBD,MAAMG,cAAc,gBAAGtB,KAAK,CAACuB,UAAU,CAAwC,CAACP,KAA0B,EAAEQ,GAAG,KAAK;EAClH,MAAM;IAAEC,EAAE;IAAEC,UAAU;IAAEC,aAAa;IAAEC,WAAW;IAAEC,WAAW;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,IAAI;IAAEC,MAAM;IAAEC;EAAQ,CAAC,GAAGlB,KAAK;EAErH,MAAMmB,UAAU,GAAG5B,kBAAkB,CAACS,KAAK,CAACoB,eAAe,IAAI,EAAE,CAAC;EAElEpC,KAAK,CAACqC,mBAAmB,CAACb,GAAG,EAAE,MAAMW,UAAU,CAACG,OAAO,EAAE,CAACH,UAAU,CAAC,CAAC;EAEtE,MAAMI,eAAe,GAAIC,CAAM,IAAK;IAClC,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAE;MACrBD,CAAC,CAACE,cAAc,CAAC,CAAC;MAClBF,CAAC,CAACG,eAAe,CAAC,CAAC;MACnB,OAAO,IAAI;IACb;IACA,OAAO,KAAK;EACd,CAAC;EAED,oBACElC,IAAA,CAACC,MAAM;IACLmB,WAAW,EAAEC,QAAQ,GAAG,EAAE,GAAGD,WAAY;IACzCL,GAAG,EAAEW,UAAW;IAChBV,EAAE,EAAEA,EAAG;IACP,eAAaA,EAAG;IAChBmB,SAAS,EAAEZ,IAAI,GAAGA,IAAI,GAAG,EAAG;IAC5Ba,QAAQ,EAAE,CAAE;IACZf,QAAQ,EAAEA,QAAS;IACnBgB,QAAQ,EAAGN,CAAM,IAAKb,aAAa,CAACa,CAAC,CAACO,MAAM,CAACC,KAAK,CAAE;IACpDA,KAAK,EAAEtB,UAAW;IAClBO,MAAM,EAAGO,CAAC,IAAKP,MAAM,IAAIA,MAAM,CAACO,CAAC,CAAE;IACnCT,SAAS,EAAEA,SAAU;IACrBkB,UAAU,EAAGT,CAAM,IAAMD,eAAe,CAACC,CAAC,CAAC,GAAGZ,WAAW,CAACY,CAAC,CAAC,GAAG,IAAM;IACrEN,OAAO,EAAEA;EAAQ,CAClB,CAAC;AAEN,CAAC,CAAC;AAACZ,cAAA,CAAA4B,SAAA;EA9CDzB,EAAE,EAAA0B,GAAA,CAAAC,MAAA,CAAAC,UAAA;EACF3B,UAAU,EAAAyB,GAAA,CAAAC,MAAA;EACVzB,aAAa,EAAAwB,GAAA,CAAAG,IAAA,CAAAD,UAAA;EACbzB,WAAW,EAAAuB,GAAA,CAAAG,IAAA,CAAAD,UAAA;EACXxB,WAAW,EAAAsB,GAAA,CAAAC,MAAA;EACXtB,QAAQ,EAAAqB,GAAA,CAAAI,IAAA;EACRxB,SAAS,EAAAoB,GAAA,CAAAG,IAAA;EAETrB,MAAM,EAAAkB,GAAA,CAAAG,IAAA;EACNlB,eAAe,EAAAe,GAAA,CAAAK,KAAA;EACftB,OAAO,EAAAiB,GAAA,CAAAG;AAAA;AAsCT,eAAehC,cAAc","ignoreList":[]}
+{"version":3,"file":"SearchBarInput.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","useFocusVisibleRef","jsx","_jsx","Search","input","attrs","type","_templateObject","_taggedTemplateLiteral","props","Italic","getColor","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.getColor('neutral_500', 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.getColor('black', props.theme))}\r\n  ::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', 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.getColor('neutral_600', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    margin-left: 48px;\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    \r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', 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":[]}