@laerdal/life-react-components 3.5.1-dev.12 → 3.5.1-dev.14

package/dist/InputFields/SearchBar.js

@@ -1,63 +1,187 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import React from 'react';
-import { COLORS } from '../styles/index';
-import { SystemIcons } from '../icons';
-import { ErrorMessage, InputWrapper, SearchIconWrapper } from './styling';
-import { IconButton } from '../Button';
-import SearchBarInput from './components/SearchBarInput';
-import SearchField from './components/SearchField';
-import styled from 'styled-components';
-import { DropdownContent } from '../Dropdown';
-import { useClickOutsideRef } from '../common';
-var ClearIconWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n"])));
-var SearchBar = function (_a) {
-    var id = _a.id, searchTerm = _a.searchTerm, setSearchTerm = _a.setSearchTerm, enterSearch = _a.enterSearch, removeSearch = _a.removeSearch, placeholder = _a.placeholder, performSearchLabel = _a.performSearchLabel, disabled = _a.disabled, validationMessage = _a.validationMessage, onKeyDown = _a.onKeyDown, size = _a.size, margin = _a.margin, showDropdown = _a.showDropdown, dropdownButtonIcon = _a.dropdownButtonIcon, dropdownButtonLabel = _a.dropdownButtonLabel, dropdownButtonVariant = _a.dropdownButtonVariant, dropdownButtonAction = _a.dropdownButtonAction, _b = _a.searchList, searchList = _b === void 0 ? [] : _b, addToSearchList = _a.addToSearchList, dropdownScrollable = _a.dropdownScrollable;
-    var containerRef = React.useRef(null);
-    var topLevelRef = React.useRef(null);
-    var _c = React.useState(false), isOpen = _c[0], setIsOpen = _c[1];
-    var dropdownRef = useClickOutsideRef(function () { return setIsOpen(false); }, [containerRef, topLevelRef]);
-    var isPressingEnter = function (e) {
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            e.stopPropagation();
-            return true;
-        }
-        return false;
-    };
-    var enteredSearchTerm = function (e) {
-        addToSearchList && addToSearchList({ value: e.target.value });
-        enterSearch(e);
-    };
-    var dropdownAction = function () {
-        if (dropdownButtonAction)
-            dropdownButtonAction();
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(InputWrapper, { disabled: disabled, ref: topLevelRef, margin: margin },
-            React.createElement(SearchField, { id: 'id', size: size, ref: containerRef, searchTerm: searchTerm, disabled: disabled, validationMessage: validationMessage },
-                React.createElement(SearchBarInput, { placeholder: disabled ? '' : placeholder, id: id, size: size, disabled: disabled, setSearchTerm: function (term) { return setSearchTerm(term); }, searchTerm: searchTerm, onKeyDown: onKeyDown, enterSearch: enteredSearchTerm, focusParentRefs: [containerRef], onClick: function () { return setIsOpen(!isOpen); }, ref: dropdownRef }),
-                React.createElement(SearchIconWrapper, { className: size ? size : '', "aria-label": performSearchLabel },
-                    React.createElement(IconButton, { id: "".concat(id, "_Search"), variant: "secondary", shape: "circular", action: enterSearch, disabled: disabled, onKeyPress: function (e) { return (isPressingEnter(e) ? enterSearch(e) : null); } },
-                        React.createElement(SystemIcons.Search, { size: "24px" }))),
-                React.createElement(ClearIconWrapper, { className: (size ? size : '').concat(!searchTerm ? ' hidden' : '') },
-                    React.createElement(IconButton, { id: "".concat(id, "_Clear"), variant: "secondary", shape: "circular", action: removeSearch, disabled: disabled, onKeyPress: function (e) { return (isPressingEnter(e) ? removeSearch(e) : null); } },
-                        React.createElement(SystemIcons.Clear, { size: "24px" })))),
-            showDropdown && React.createElement(DropdownContent, { id: 'search', containerRef: containerRef, size: size, isButton: false, ariaRolesType: "input", customizationProps: {
-                    items: searchList,
-                    action: dropdownAction,
-                    actionLabel: dropdownButtonLabel,
-                    actionIcon: dropdownButtonIcon,
-                    actionVariant: dropdownButtonVariant,
-                    onValueUpdate: function (e) { },
-                    scrollable: dropdownScrollable,
-                    pinTopItem: true
-                }, isOpen: isOpen, setIsOpen: setIsOpen, filter: '', selectedValues: searchTerm ? [searchTerm] : [], setSelectedValues: function (e) { return setSearchTerm(e[0]); }, messageOnNoResults: '', focused: null, setFocused: function () { } })),
-        validationMessage && (React.createElement(ErrorMessage, { className: size || '' },
-            React.createElement(SystemIcons.TechnicalWarning, { color: COLORS.critical_400, className: size || '' }),
-            React.createElement("span", null, validationMessage)))));
-};
-export default SearchBar;
-var templateObject_1;
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject;
+import React from 'react';
+import { COLORS } from '../styles/index';
+import { SystemIcons } from '../icons';
+import { ErrorMessage, InputWrapper, SearchIconWrapper } from './styling';
+import { IconButton } from '../Button';
+import SearchBarInput from './components/SearchBarInput';
+import SearchField from './components/SearchField';
+import styled from 'styled-components';
+import { DropdownContent } from '../Dropdown';
+import { useClickOutsideRef } from '../common';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var ClearIconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n"])));
+var SearchBar = function SearchBar(_ref) {
+  var id = _ref.id,
+    searchTerm = _ref.searchTerm,
+    _setSearchTerm = _ref.setSearchTerm,
+    enterSearch = _ref.enterSearch,
+    removeSearch = _ref.removeSearch,
+    placeholder = _ref.placeholder,
+    performSearchLabel = _ref.performSearchLabel,
+    disabled = _ref.disabled,
+    validationMessage = _ref.validationMessage,
+    onKeyDown = _ref.onKeyDown,
+    size = _ref.size,
+    margin = _ref.margin,
+    showDropdown = _ref.showDropdown,
+    dropdownButtonIcon = _ref.dropdownButtonIcon,
+    dropdownButtonLabel = _ref.dropdownButtonLabel,
+    dropdownButtonVariant = _ref.dropdownButtonVariant,
+    dropdownButtonAction = _ref.dropdownButtonAction,
+    _ref$searchList = _ref.searchList,
+    searchList = _ref$searchList === void 0 ? [] : _ref$searchList,
+    addToSearchList = _ref.addToSearchList,
+    dropdownScrollable = _ref.dropdownScrollable;
+  var containerRef = React.useRef(null);
+  var topLevelRef = React.useRef(null);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isOpen = _React$useState2[0],
+    setIsOpen = _React$useState2[1];
+  var dropdownRef = useClickOutsideRef(function () {
+    return setIsOpen(false);
+  }, [containerRef, topLevelRef]);
+  var isPressingEnter = function isPressingEnter(e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.stopPropagation();
+      return true;
+    }
+    return false;
+  };
+  var enteredSearchTerm = function enteredSearchTerm(e) {
+    addToSearchList && addToSearchList({
+      value: e.target.value
+    });
+    enterSearch(e);
+  };
+  var dropdownAction = function dropdownAction() {
+    if (dropdownButtonAction) dropdownButtonAction();
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(InputWrapper, {
+      disabled: disabled,
+      ref: topLevelRef,
+      margin: margin,
+      children: [/*#__PURE__*/_jsxs(SearchField, {
+        id: 'id',
+        size: size,
+        ref: containerRef,
+        searchTerm: searchTerm,
+        disabled: disabled,
+        validationMessage: validationMessage,
+        children: [/*#__PURE__*/_jsx(SearchBarInput, {
+          placeholder: disabled ? '' : placeholder,
+          id: id,
+          size: size,
+          disabled: disabled,
+          setSearchTerm: function setSearchTerm(term) {
+            return _setSearchTerm(term);
+          },
+          searchTerm: searchTerm,
+          onKeyDown: onKeyDown,
+          enterSearch: enteredSearchTerm,
+          focusParentRefs: [containerRef],
+          onClick: function onClick() {
+            return setIsOpen(!isOpen);
+          },
+          ref: dropdownRef
+        }), /*#__PURE__*/_jsx(SearchIconWrapper, {
+          className: size ? size : '',
+          "aria-label": performSearchLabel,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            id: "".concat(id, "_Search"),
+            variant: "secondary",
+            shape: "circular",
+            action: enterSearch,
+            disabled: disabled,
+            onKeyPress: function onKeyPress(e) {
+              return isPressingEnter(e) ? enterSearch(e) : null;
+            },
+            children: /*#__PURE__*/_jsx(SystemIcons.Search, {
+              size: "24px"
+            })
+          })
+        }), /*#__PURE__*/_jsx(ClearIconWrapper, {
+          className: (size ? size : '').concat(!searchTerm ? ' hidden' : ''),
+          children: /*#__PURE__*/_jsx(IconButton, {
+            id: "".concat(id, "_Clear"),
+            variant: "secondary",
+            shape: "circular",
+            action: removeSearch,
+            disabled: disabled,
+            onKeyPress: function onKeyPress(e) {
+              return isPressingEnter(e) ? removeSearch(e) : null;
+            },
+            children: /*#__PURE__*/_jsx(SystemIcons.Clear, {
+              size: "24px"
+            })
+          })
+        })]
+      }), showDropdown && /*#__PURE__*/_jsx(DropdownContent, {
+        id: 'search',
+        containerRef: containerRef,
+        size: size,
+        isButton: false,
+        ariaRolesType: "input",
+        customizationProps: {
+          items: searchList,
+          action: dropdownAction,
+          actionLabel: dropdownButtonLabel,
+          actionIcon: dropdownButtonIcon,
+          actionVariant: dropdownButtonVariant,
+          onValueUpdate: function onValueUpdate(e) {},
+          scrollable: dropdownScrollable,
+          pinTopItem: true
+        },
+        isOpen: isOpen,
+        setIsOpen: setIsOpen,
+        filter: '',
+        selectedValues: searchTerm ? [searchTerm] : [],
+        setSelectedValues: function setSelectedValues(e) {
+          return _setSearchTerm(e[0]);
+        },
+        messageOnNoResults: '',
+        focused: null,
+        setFocused: function setFocused() {}
+      })]
+    }), validationMessage && /*#__PURE__*/_jsxs(ErrorMessage, {
+      className: size || '',
+      children: [/*#__PURE__*/_jsx(SystemIcons.TechnicalWarning, {
+        color: COLORS.critical_400,
+        className: size || ''
+      }), /*#__PURE__*/_jsx("span", {
+        children: validationMessage
+      })]
+    })]
+  });
+};
+SearchBar.propTypes = {
+  id: _pt.string.isRequired,
+  searchTerm: _pt.string,
+  setSearchTerm: _pt.func.isRequired,
+  enterSearch: _pt.func.isRequired,
+  removeSearch: _pt.func.isRequired,
+  placeholder: _pt.string,
+  performSearchLabel: _pt.string,
+  disabled: _pt.bool,
+  validationMessage: _pt.string,
+  onKeyDown: _pt.func,
+  margin: _pt.string,
+  showDropdown: _pt.bool,
+  dropdownButtonIcon: _pt.node,
+  dropdownButtonLabel: _pt.string,
+  dropdownButtonVariant: _pt.oneOf(['primary', 'secondary', 'tertiary']),
+  dropdownButtonAction: _pt.func,
+  searchList: _pt.array,
+  addToSearchList: _pt.func,
+  dropdownScrollable: _pt.bool
+};
+export default SearchBar;
+//# sourceMappingURL=SearchBar.js.map

package/dist/InputFields/TextField.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Size, States, Testable } from '../types';
 import { TextFieldNote } from './types';
-export declare type TextFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id' | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'> & {
+export type TextFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id' | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'> & {
     /**
        * Optional. The ID of the text field.
        */

package/dist/InputFields/TextField.js

@@ -1,51 +1,121 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import { SystemIcons } from '../icons';
-import { COLORS } from '../styles';
-import { States } from '../types';
-import { InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage } from './styling';
-import { useFocusVisibleRef } from '../common';
-import TooltipOverflow from '../Tooltips/TooltipOverflow';
-var TextField = React.forwardRef(function (_a, ref) {
-    var id = _a.id, disabled = _a.disabled, readOnly = _a.readOnly, onChange = _a.onChange, value = _a.value, validationMessage = _a.validationMessage, type = _a.type, autoComplete = _a.autoComplete, placeholder = _a.placeholder, required = _a.required, pattern = _a.pattern, maxLength = _a.maxLength, withoutBorder = _a.withoutBorder, state = _a.state, size = _a.size, margin = _a.margin, overflowTooltipPosition = _a.overflowTooltipPosition, note = _a.note, className = _a.className, dataTestId = _a.dataTestId, rest = __rest(_a, ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "withoutBorder", "state", "size", "margin", "overflowTooltipPosition", "note", "className", "dataTestId"]);
-    var elementRef = useFocusVisibleRef();
-    React.useImperativeHandle(ref, function () { return elementRef.current; }, [elementRef]);
-    var cls = "".concat(state || (validationMessage ? States.Invalid : ''), " ").concat(size || '');
-    return (React.createElement(React.Fragment, null,
-        React.createElement(InputWrapper, { readOnly: readOnly, disabled: disabled, margin: margin, onClick: function (e) {
-                if (disabled || readOnly) {
-                    e.preventDefault();
-                }
-            } },
-            React.createElement(InputFieldStyling, __assign({ id: id, "data-testid": dataTestId, ref: elementRef, type: type || 'text', value: value, className: cls, tabIndex: readOnly || disabled ? -1 : 0, autoComplete: autoComplete, placeholder: disabled ? undefined : placeholder, disabled: disabled, readOnly: readOnly, onChange: function (e) { var _a; return onChange && onChange(((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value) || ''); }, activeErrorMessage: !!validationMessage && state !== States.Valid, required: required, pattern: pattern, maxLength: maxLength, withoutBorder: withoutBorder }, rest)),
-            React.createElement(TooltipOverflow, { value: value, position: overflowTooltipPosition, input: elementRef, withArrow: true, maxWidth: "100%", size: size, align: 'end' }, value),
-            validationMessage && (React.createElement(ValidationMessage, { className: size || '', type: state !== null && state !== void 0 ? state : States.Invalid },
-                state === States.Valid ? React.createElement(SystemIcons.CheckMark, { color: COLORS.correct_400 }) :
-                    React.createElement(SystemIcons.TechnicalWarning, { color: COLORS.critical_400 }),
-                React.createElement("span", null, validationMessage))),
-            note && !disabled && (React.createElement(NoteMessage, { className: size },
-                note.icon,
-                React.createElement("span", null, note.message))))));
-});
-export default TextField;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _pt from "prop-types";
+var _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "withoutBorder", "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';
+import { SystemIcons } from '../icons';
+import { COLORS } from '../styles';
+import { States } from '../types';
+import { InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage } from './styling';
+import { useFocusVisibleRef } from '../common';
+import TooltipOverflow from '../Tooltips/TooltipOverflow';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var id = _ref.id,
+    disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
+    _onChange = _ref.onChange,
+    value = _ref.value,
+    validationMessage = _ref.validationMessage,
+    type = _ref.type,
+    autoComplete = _ref.autoComplete,
+    placeholder = _ref.placeholder,
+    required = _ref.required,
+    pattern = _ref.pattern,
+    maxLength = _ref.maxLength,
+    withoutBorder = _ref.withoutBorder,
+    state = _ref.state,
+    size = _ref.size,
+    margin = _ref.margin,
+    overflowTooltipPosition = _ref.overflowTooltipPosition,
+    note = _ref.note,
+    className = _ref.className,
+    dataTestId = _ref.dataTestId,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var elementRef = useFocusVisibleRef();
+  React.useImperativeHandle(ref, function () {
+    return elementRef.current;
+  }, [elementRef]);
+  var cls = "".concat(state || (validationMessage ? States.Invalid : ''), " ").concat(size || '');
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs(InputWrapper, {
+      readOnly: readOnly,
+      disabled: disabled,
+      margin: margin,
+      onClick: function onClick(e) {
+        if (disabled || readOnly) {
+          e.preventDefault();
+        }
+      },
+      children: [/*#__PURE__*/_jsx(InputFieldStyling, _objectSpread({
+        id: id,
+        "data-testid": dataTestId,
+        ref: elementRef,
+        type: type || 'text',
+        value: value,
+        className: cls,
+        tabIndex: readOnly || disabled ? -1 : 0,
+        autoComplete: autoComplete,
+        placeholder: disabled ? undefined : placeholder,
+        disabled: disabled,
+        readOnly: readOnly,
+        onChange: function onChange(e) {
+          var _e$target;
+          return _onChange && _onChange((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '');
+        },
+        activeErrorMessage: !!validationMessage && state !== States.Valid,
+        required: required,
+        pattern: pattern,
+        maxLength: maxLength,
+        withoutBorder: withoutBorder
+      }, rest)), /*#__PURE__*/_jsx(TooltipOverflow, {
+        value: value,
+        position: overflowTooltipPosition,
+        input: elementRef,
+        withArrow: true,
+        maxWidth: "100%",
+        size: size,
+        align: "end",
+        children: value
+      }), validationMessage && /*#__PURE__*/_jsxs(ValidationMessage, {
+        className: size || '',
+        type: state !== null && state !== void 0 ? state : States.Invalid,
+        children: [state === States.Valid ? /*#__PURE__*/_jsx(SystemIcons.CheckMark, {
+          color: COLORS.correct_400
+        }) : /*#__PURE__*/_jsx(SystemIcons.TechnicalWarning, {
+          color: COLORS.critical_400
+        }), /*#__PURE__*/_jsx("span", {
+          children: validationMessage
+        })]
+      }), note && !disabled && /*#__PURE__*/_jsxs(NoteMessage, {
+        className: size,
+        children: [note.icon, /*#__PURE__*/_jsx("span", {
+          children: note.message
+        })]
+      })]
+    })
+  });
+});
+TextField.propTypes = {
+  id: _pt.string,
+  disabled: _pt.bool,
+  readOnly: _pt.bool,
+  onChange: _pt.func,
+  value: _pt.string,
+  validationMessage: _pt.string,
+  type: _pt.string,
+  autoComplete: _pt.string,
+  placeholder: _pt.string,
+  required: _pt.bool,
+  pattern: _pt.string,
+  maxLength: _pt.number,
+  withoutBorder: _pt.bool,
+  overflowTooltipPosition: _pt.oneOf(['top', 'bottom']),
+  margin: _pt.string
+};
+export default TextField;
+//# sourceMappingURL=TextField.js.map

package/dist/InputFields/Textarea.js

@@ -1,65 +1,96 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+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; }
 /**
  * Import React libraries.
- */
-import * as React from 'react';
+ */
+import * as React from 'react';
+
 /**
  * Import custom styles.
- */
-import { COLORS, ComponentSStyling, focusStyles } from '../styles';
-import { NoteMessage, readOnlyState, ValidationMessage } from './styling';
-import { States } from '../types';
+ */
+import { COLORS, ComponentSStyling, focusStyles } from '../styles';
+import { NoteMessage, readOnlyState, ValidationMessage } from './styling';
+import { States } from '../types';
+
 /**
  * Import custom components.
- */
-import { SystemIcons } from '../icons';
+ */
+import { SystemIcons } from '../icons';
+
 /**
  * Import third-party libraries.
- */
-import styled from 'styled-components';
-import { ComponentMStyling, ComponentTextStyle } from '../styles';
-import { useFocusVisibleRef } from "../common";
-// Add component-specific styles.
-var TextareaWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  ", "\n"], ["\n  width: 100%;\n  ", "\n"])), function (props) { return (props.margin ? "margin: ".concat(props.margin, ";") : ''); });
-var TextArea = styled.textarea(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\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"], ["\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"])), COLORS.white, COLORS.neutral_400, function (props) { return (props.autoHeight ? 'none' : ''); }, ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), COLORS.primary_800, focusStyles, COLORS.critical_500, COLORS.correct_500, COLORS.primary_700, COLORS.primary_800, readOnlyState, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500));
-var Textarea = React.forwardRef(function (_a, ref) {
-    var id = _a.id, placeholder = _a.placeholder, state = _a.state, value = _a.value, size = _a.size, disabled = _a.disabled, validationMessage = _a.validationMessage, onChange = _a.onChange, margin = _a.margin, autoHeight = _a.autoHeight, note = _a.note, required = _a.required, className = _a.className, dataTestId = _a.dataTestId, rest = __rest(_a, ["id", "placeholder", "state", "value", "size", "disabled", "validationMessage", "onChange", "margin", "autoHeight", "note", "required", "className", "dataTestId"]);
-    var elementRef = useFocusVisibleRef();
-    React.useImperativeHandle(ref, function () { return elementRef.current; }, [elementRef]);
-    var cls = "".concat(size, " ").concat(state || (validationMessage ? States.Invalid : ''), " ").concat(className || '');
-    return (React.createElement(TextareaWrapper, null,
-        React.createElement(TextArea, __assign({ id: id, "data-testid": dataTestId, ref: elementRef, value: value, placeholder: disabled ? undefined : placeholder, autoHeight: autoHeight, className: cls, disabled: disabled, onChange: function (e) { var _a; return onChange && onChange(((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value) || ''); }, required: required }, rest)),
-        validationMessage && (React.createElement(ValidationMessage, { className: size || '', type: state !== null && state !== void 0 ? state : States.Invalid },
-            state === States.Valid ? React.createElement(SystemIcons.CheckMark, { color: COLORS.correct_400 }) : React.createElement(SystemIcons.TechnicalWarning, { color: COLORS.critical_400 }),
-            React.createElement("span", null, validationMessage))),
-        note && !disabled && (React.createElement(NoteMessage, { className: size },
-            note.icon,
-            React.createElement("span", null, note.message)))));
-});
-export default Textarea;
-var templateObject_1, templateObject_2;
+ */
+import styled from 'styled-components';
+import { ComponentMStyling, ComponentTextStyle } from '../styles';
+import { useFocusVisibleRef } from "../common";
+
+// Add component-specific styles.
+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"])), COLORS.white, COLORS.neutral_400, function (props) {
+  return props.autoHeight ? 'none' : '';
+}, ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), COLORS.primary_800, focusStyles, COLORS.critical_500, COLORS.correct_500, COLORS.primary_700, COLORS.primary_800, readOnlyState, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500));
+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);
+  var elementRef = useFocusVisibleRef();
+  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,
+      "data-testid": dataTestId,
+      ref: elementRef,
+      value: value,
+      placeholder: disabled ? undefined : placeholder,
+      autoHeight: autoHeight,
+      className: cls,
+      disabled: disabled,
+      onChange: function onChange(e) {
+        var _e$target;
+        return _onChange && _onChange((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '');
+      },
+      required: required
+    }, rest)), validationMessage && /*#__PURE__*/_jsxs(ValidationMessage, {
+      className: size || '',
+      type: state !== null && state !== void 0 ? state : States.Invalid,
+      children: [state === States.Valid ? /*#__PURE__*/_jsx(SystemIcons.CheckMark, {
+        color: COLORS.correct_400
+      }) : /*#__PURE__*/_jsx(SystemIcons.TechnicalWarning, {
+        color: COLORS.critical_400
+      }), /*#__PURE__*/_jsx("span", {
+        children: validationMessage
+      })]
+    }), note && !disabled && /*#__PURE__*/_jsxs(NoteMessage, {
+      className: size,
+      children: [note.icon, /*#__PURE__*/_jsx("span", {
+        children: note.message
+      })]
+    })]
+  });
+});
+export default Textarea;
+//# sourceMappingURL=Textarea.js.map

package/dist/InputFields/components/SearchBarInput.d.ts

@@ -3,7 +3,7 @@ import { Size } from '../../types';
 export declare const Search: import("styled-components").StyledComponent<"input", any, {
     type: "search";
 }, "type">;
-declare type SearchBarInputProps = {
+type SearchBarInputProps = {
     id: string;
     searchTerm?: string;
     setSearchTerm: (term: string) => void;