@laerdal/life-react-components 1.4.1-dev.1 → 1.4.1-dev.12

package/dist/InputFields/TextField.cjs

@@ -0,0 +1,126 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _styles = require("../styles");
+
+var _styling = require("./styling");
+
+var _FocusVisible = require("../common/FocusVisible");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var TextField = function TextField(_ref) {
+  var id = _ref.id,
+      disabled = _ref.disabled,
+      locked = _ref.locked,
+      _onChange = _ref.onChange,
+      hasError = _ref.hasError,
+      value = _ref.value,
+      validationMessage = _ref.validationMessage,
+      validationIsCritical = _ref.validationIsCritical,
+      type = _ref.type,
+      autoComplete = _ref.autoComplete,
+      placeholder = _ref.placeholder,
+      required = _ref.required,
+      correct = _ref.correct,
+      pattern = _ref.pattern,
+      maxLength = _ref.maxLength,
+      withoutBorder = _ref.withoutBorder,
+      size = _ref.size,
+      _ref$margin = _ref.margin,
+      margin = _ref$margin === void 0 ? '4px 0' : _ref$margin;
+  var elementRef = (0, _FocusVisible.useFocusVisibleRef)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styling.InputWrapper, {
+      locked: locked,
+      disabled: disabled,
+      margin: margin,
+      onClick: function onClick(e) {
+        if (disabled || locked) {
+          e.preventDefault();
+        }
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styling.InputFieldStyling, {
+        id: id,
+        ref: elementRef,
+        type: type || 'text',
+        value: value,
+        className: (hasError ? 'error' : '').concat(size ? size : ''),
+        tabIndex: locked || disabled ? -1 : 0,
+        autoComplete: autoComplete,
+        placeholder: placeholder,
+        disabled: disabled,
+        locked: locked,
+        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) || '');
+        },
+        activeValidationMessage: validationMessage !== '' && validationMessage !== undefined,
+        activeErrorMessage: validationMessage !== '' && validationMessage !== undefined && validationIsCritical,
+        required: required,
+        correctInput: correct,
+        pattern: pattern,
+        maxLength: maxLength,
+        withoutBorder: withoutBorder
+      })
+    }), validationMessage && !validationIsCritical && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.WarningMessage, {
+      className: size || '',
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
+        size: "20px",
+        color: _styles.COLORS.warning_400
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: validationMessage
+      })]
+    }), validationMessage && validationIsCritical && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
+      className: size || '',
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
+        size: "20px",
+        color: _styles.COLORS.critical_400
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: validationMessage
+      })]
+    })]
+  });
+};
+
+TextField.propTypes = {
+  id: _propTypes.default.string.isRequired,
+  disabled: _propTypes.default.bool,
+  locked: _propTypes.default.bool,
+  onChange: _propTypes.default.func,
+  hasError: _propTypes.default.bool,
+  value: _propTypes.default.string,
+  validationMessage: _propTypes.default.string,
+  validationIsCritical: _propTypes.default.bool,
+  type: _propTypes.default.string,
+  autoComplete: _propTypes.default.string,
+  placeholder: _propTypes.default.string,
+  required: _propTypes.default.bool,
+  correct: _propTypes.default.bool,
+  pattern: _propTypes.default.string,
+  maxLength: _propTypes.default.number,
+  withoutBorder: _propTypes.default.bool,
+  margin: _propTypes.default.string
+};
+var _default = TextField;
+exports.default = _default;
+//# sourceMappingURL=TextField.cjs.map

package/dist/InputFields/TextField.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/InputFields/TextField.tsx"],"names":["TextField","id","disabled","locked","onChange","hasError","value","validationMessage","validationIsCritical","type","autoComplete","placeholder","required","correct","pattern","maxLength","withoutBorder","size","margin","elementRef","e","preventDefault","concat","target","undefined","COLORS","warning_400","critical_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { COLORS } from '../styles';\nimport { Size} from '../types';\nimport { ErrorMessage, InputFieldStyling, InputWrapper, WarningMessage } from './styling';\nimport {useFocusVisibleRef} from '../common/FocusVisible';\n\ntype TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (text: string) => void;\n  hasError?: boolean;\n  value?: string;\n  validationMessage?: string;\n  validationIsCritical?: boolean;\n  type?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  correct?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst TextField = ({\n  id,\n  disabled,\n  locked,\n  onChange,\n  hasError,\n  value,\n  validationMessage,\n  validationIsCritical,\n  type,\n  autoComplete,\n  placeholder,\n  required,\n  correct,\n  pattern,\n  maxLength,\n  withoutBorder,\n  size,\n  margin = '4px 0',\n}: TextFieldProps) => {\n  const elementRef = useFocusVisibleRef();\n\n  return (\n    <>\n      <InputWrapper\n        locked={locked}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || locked) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={(hasError ? 'error' : '').concat(size ? size : '')}\n          tabIndex={locked || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={placeholder}\n          disabled={disabled}\n          locked={locked}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeValidationMessage={validationMessage !== '' && validationMessage !== undefined}\n          activeErrorMessage={validationMessage !== '' && validationMessage !== undefined && validationIsCritical}\n          required={required}\n          correctInput={correct}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n        />\n      </InputWrapper>\n      {validationMessage && !validationIsCritical && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      )}\n      {validationMessage && validationIsCritical && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default TextField;\n"],"file":"TextField.cjs"}

package/dist/InputFields/TextField.js

@@ -0,0 +1,106 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import { TechnicalWarning } from '../icons/systemicons/SystemIcons';
+import { COLORS } from '../styles';
+import { ErrorMessage, InputFieldStyling, InputWrapper, WarningMessage } from './styling';
+import { useFocusVisibleRef } from '../common/FocusVisible';
+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 = function TextField(_ref) {
+  var id = _ref.id,
+      disabled = _ref.disabled,
+      locked = _ref.locked,
+      _onChange = _ref.onChange,
+      hasError = _ref.hasError,
+      value = _ref.value,
+      validationMessage = _ref.validationMessage,
+      validationIsCritical = _ref.validationIsCritical,
+      type = _ref.type,
+      autoComplete = _ref.autoComplete,
+      placeholder = _ref.placeholder,
+      required = _ref.required,
+      correct = _ref.correct,
+      pattern = _ref.pattern,
+      maxLength = _ref.maxLength,
+      withoutBorder = _ref.withoutBorder,
+      size = _ref.size,
+      _ref$margin = _ref.margin,
+      margin = _ref$margin === void 0 ? '4px 0' : _ref$margin;
+  var elementRef = useFocusVisibleRef();
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(InputWrapper, {
+      locked: locked,
+      disabled: disabled,
+      margin: margin,
+      onClick: function onClick(e) {
+        if (disabled || locked) {
+          e.preventDefault();
+        }
+      },
+      children: /*#__PURE__*/_jsx(InputFieldStyling, {
+        id: id,
+        ref: elementRef,
+        type: type || 'text',
+        value: value,
+        className: (hasError ? 'error' : '').concat(size ? size : ''),
+        tabIndex: locked || disabled ? -1 : 0,
+        autoComplete: autoComplete,
+        placeholder: placeholder,
+        disabled: disabled,
+        locked: locked,
+        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) || '');
+        },
+        activeValidationMessage: validationMessage !== '' && validationMessage !== undefined,
+        activeErrorMessage: validationMessage !== '' && validationMessage !== undefined && validationIsCritical,
+        required: required,
+        correctInput: correct,
+        pattern: pattern,
+        maxLength: maxLength,
+        withoutBorder: withoutBorder
+      })
+    }), validationMessage && !validationIsCritical && /*#__PURE__*/_jsxs(WarningMessage, {
+      className: size || '',
+      children: [/*#__PURE__*/_jsx(TechnicalWarning, {
+        size: "20px",
+        color: COLORS.warning_400
+      }), /*#__PURE__*/_jsx("span", {
+        children: validationMessage
+      })]
+    }), validationMessage && validationIsCritical && /*#__PURE__*/_jsxs(ErrorMessage, {
+      className: size || '',
+      children: [/*#__PURE__*/_jsx(TechnicalWarning, {
+        size: "20px",
+        color: COLORS.critical_400
+      }), /*#__PURE__*/_jsx("span", {
+        children: validationMessage
+      })]
+    })]
+  });
+};
+
+TextField.propTypes = {
+  id: _pt.string.isRequired,
+  disabled: _pt.bool,
+  locked: _pt.bool,
+  onChange: _pt.func,
+  hasError: _pt.bool,
+  value: _pt.string,
+  validationMessage: _pt.string,
+  validationIsCritical: _pt.bool,
+  type: _pt.string,
+  autoComplete: _pt.string,
+  placeholder: _pt.string,
+  required: _pt.bool,
+  correct: _pt.bool,
+  pattern: _pt.string,
+  maxLength: _pt.number,
+  withoutBorder: _pt.bool,
+  margin: _pt.string
+};
+export default TextField;
+//# sourceMappingURL=TextField.js.map

package/dist/InputFields/TextField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/InputFields/TextField.tsx"],"names":["React","TechnicalWarning","COLORS","ErrorMessage","InputFieldStyling","InputWrapper","WarningMessage","useFocusVisibleRef","TextField","id","disabled","locked","onChange","hasError","value","validationMessage","validationIsCritical","type","autoComplete","placeholder","required","correct","pattern","maxLength","withoutBorder","size","margin","elementRef","e","preventDefault","concat","target","undefined","warning_400","critical_400"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,gBAAT,QAAiC,kCAAjC;AACA,SAASC,MAAT,QAAuB,WAAvB;AAEA,SAASC,YAAT,EAAuBC,iBAAvB,EAA0CC,YAA1C,EAAwDC,cAAxD,QAA8E,WAA9E;AACA,SAAQC,kBAAR,QAAiC,wBAAjC;;;;;AAuBA,IAAMC,SAAS,GAAG,SAAZA,SAAY,OAmBI;AAAA,MAlBpBC,EAkBoB,QAlBpBA,EAkBoB;AAAA,MAjBpBC,QAiBoB,QAjBpBA,QAiBoB;AAAA,MAhBpBC,MAgBoB,QAhBpBA,MAgBoB;AAAA,MAfpBC,SAeoB,QAfpBA,QAeoB;AAAA,MAdpBC,QAcoB,QAdpBA,QAcoB;AAAA,MAbpBC,KAaoB,QAbpBA,KAaoB;AAAA,MAZpBC,iBAYoB,QAZpBA,iBAYoB;AAAA,MAXpBC,oBAWoB,QAXpBA,oBAWoB;AAAA,MAVpBC,IAUoB,QAVpBA,IAUoB;AAAA,MATpBC,YASoB,QATpBA,YASoB;AAAA,MARpBC,WAQoB,QARpBA,WAQoB;AAAA,MAPpBC,QAOoB,QAPpBA,QAOoB;AAAA,MANpBC,OAMoB,QANpBA,OAMoB;AAAA,MALpBC,OAKoB,QALpBA,OAKoB;AAAA,MAJpBC,SAIoB,QAJpBA,SAIoB;AAAA,MAHpBC,aAGoB,QAHpBA,aAGoB;AAAA,MAFpBC,IAEoB,QAFpBA,IAEoB;AAAA,yBADpBC,MACoB;AAAA,MADpBA,MACoB,4BADX,OACW;AACpB,MAAMC,UAAU,GAAGpB,kBAAkB,EAArC;AAEA,sBACE;AAAA,4BACE,KAAC,YAAD;AACE,MAAA,MAAM,EAAEI,MADV;AAEE,MAAA,QAAQ,EAAED,QAFZ;AAGE,MAAA,MAAM,EAAEgB,MAHV;AAIE,MAAA,OAAO,EAAE,iBAACE,CAAD,EAAY;AACnB,YAAIlB,QAAQ,IAAIC,MAAhB,EAAwB;AACtBiB,UAAAA,CAAC,CAACC,cAAF;AACD;AACF,OARH;AAAA,6BASE,KAAC,iBAAD;AACE,QAAA,EAAE,EAAEpB,EADN;AAEE,QAAA,GAAG,EAAEkB,UAFP;AAGE,QAAA,IAAI,EAAEV,IAAI,IAAI,MAHhB;AAIE,QAAA,KAAK,EAAEH,KAJT;AAKE,QAAA,SAAS,EAAE,CAACD,QAAQ,GAAG,OAAH,GAAa,EAAtB,EAA0BiB,MAA1B,CAAiCL,IAAI,GAAGA,IAAH,GAAU,EAA/C,CALb;AAME,QAAA,QAAQ,EAAEd,MAAM,IAAID,QAAV,GAAqB,CAAC,CAAtB,GAA0B,CANtC;AAOE,QAAA,YAAY,EAAEQ,YAPhB;AAQE,QAAA,WAAW,EAAEC,WARf;AASE,QAAA,QAAQ,EAAET,QATZ;AAUE,QAAA,MAAM,EAAEC,MAVV;AAWE,QAAA,QAAQ,EAAE,kBAACiB,CAAD;AAAA;;AAAA,iBAAYhB,SAAQ,IAAIA,SAAQ,CAAC,CAAAgB,CAAC,SAAD,IAAAA,CAAC,WAAD,yBAAAA,CAAC,CAAEG,MAAH,wDAAWjB,KAAX,KAAoB,EAArB,CAAhC;AAAA,SAXZ;AAYE,QAAA,uBAAuB,EAAEC,iBAAiB,KAAK,EAAtB,IAA4BA,iBAAiB,KAAKiB,SAZ7E;AAaE,QAAA,kBAAkB,EAAEjB,iBAAiB,KAAK,EAAtB,IAA4BA,iBAAiB,KAAKiB,SAAlD,IAA+DhB,oBAbrF;AAcE,QAAA,QAAQ,EAAEI,QAdZ;AAeE,QAAA,YAAY,EAAEC,OAfhB;AAgBE,QAAA,OAAO,EAAEC,OAhBX;AAiBE,QAAA,SAAS,EAAEC,SAjBb;AAkBE,QAAA,aAAa,EAAEC;AAlBjB;AATF,MADF,EA+BGT,iBAAiB,IAAI,CAACC,oBAAtB,iBACC,MAAC,cAAD;AAAgB,MAAA,SAAS,EAAES,IAAI,IAAI,EAAnC;AAAA,8BACE,KAAC,gBAAD;AAAkB,QAAA,IAAI,EAAC,MAAvB;AAA8B,QAAA,KAAK,EAAEvB,MAAM,CAAC+B;AAA5C,QADF,eAEE;AAAA,kBAAOlB;AAAP,QAFF;AAAA,MAhCJ,EAqCGA,iBAAiB,IAAIC,oBAArB,iBACC,MAAC,YAAD;AAAc,MAAA,SAAS,EAAES,IAAI,IAAI,EAAjC;AAAA,8BACE,KAAC,gBAAD;AAAkB,QAAA,IAAI,EAAC,MAAvB;AAA8B,QAAA,KAAK,EAAEvB,MAAM,CAACgC;AAA5C,QADF,eAEE;AAAA,kBAAOnB;AAAP,QAFF;AAAA,MAtCJ;AAAA,IADF;AA8CD,CApED;;;AApBEN,EAAAA,E;AACAC,EAAAA,Q;AACAC,EAAAA,M;AACAC,EAAAA,Q;AACAC,EAAAA,Q;AACAC,EAAAA,K;AACAC,EAAAA,iB;AACAC,EAAAA,oB;AACAC,EAAAA,I;AACAC,EAAAA,Y;AACAC,EAAAA,W;AACAC,EAAAA,Q;AACAC,EAAAA,O;AACAC,EAAAA,O;AACAC,EAAAA,S;AACAC,EAAAA,a;AAEAE,EAAAA,M;;AAyEF,eAAelB,SAAf","sourcesContent":["import * as React from 'react';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { COLORS } from '../styles';\nimport { Size} from '../types';\nimport { ErrorMessage, InputFieldStyling, InputWrapper, WarningMessage } from './styling';\nimport {useFocusVisibleRef} from '../common/FocusVisible';\n\ntype TextFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (text: string) => void;\n  hasError?: boolean;\n  value?: string;\n  validationMessage?: string;\n  validationIsCritical?: boolean;\n  type?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  correct?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst TextField = ({\n  id,\n  disabled,\n  locked,\n  onChange,\n  hasError,\n  value,\n  validationMessage,\n  validationIsCritical,\n  type,\n  autoComplete,\n  placeholder,\n  required,\n  correct,\n  pattern,\n  maxLength,\n  withoutBorder,\n  size,\n  margin = '4px 0',\n}: TextFieldProps) => {\n  const elementRef = useFocusVisibleRef();\n\n  return (\n    <>\n      <InputWrapper\n        locked={locked}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || locked) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={(hasError ? 'error' : '').concat(size ? size : '')}\n          tabIndex={locked || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={placeholder}\n          disabled={disabled}\n          locked={locked}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeValidationMessage={validationMessage !== '' && validationMessage !== undefined}\n          activeErrorMessage={validationMessage !== '' && validationMessage !== undefined && validationIsCritical}\n          required={required}\n          correctInput={correct}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n        />\n      </InputWrapper>\n      {validationMessage && !validationIsCritical && (\n        <WarningMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      )}\n      {validationMessage && validationIsCritical && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default TextField;\n"],"file":"TextField.js"}

package/dist/InputFields/Textarea.cjs

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styles = require("../styles");
+
+var _styling = require("./styling");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _typography = require("../styles/typography");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// Add component-specific styles.
+var TextareaWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  ", "\n"])), function (props) {
+  return props.margin ? "margin: ".concat(props.margin, ";") : '';
+});
+
+var TextArea = _styledComponents.default.textarea(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid ", ";\n  background: ", ";\n  border-radius: 4px;\n  outline: none;\n  margin: 1px;\n  padding: 16px;\n\n  ", "\n\n  &.small {\n    width: 304px;\n  }\n\n  &.medium {\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ", ";\n    margin: 0px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ", ";\n    margin: 0px;\n    box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", ";\n  }\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus,\n  &.warning:active {\n    border: none;\n    margin: 1px;\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus,\n  &.error:active {\n    border: none;\n    margin: 1px;\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ", ";\n    margin: 1px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  &::placeholder {\n    ", "\n  }\n"])), _styles.COLORS.neutral_400, _styles.COLORS.white, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.black), _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.focus_25, _styles.COLORS.focus, _styles.COLORS.warning_500, _styles.COLORS.warning_500, _styles.COLORS.warning_500, _styles.COLORS.critical_500, _styles.COLORS.critical_500, _styles.COLORS.critical_500, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_600)); // Add component-specific types
+
+
+var Textarea = function Textarea(_ref) {
+  var id = _ref.id,
+      placeholder = _ref.placeholder,
+      value = _ref.value,
+      size = _ref.size,
+      disabled = _ref.disabled,
+      validationType = _ref.validationType,
+      validationMessage = _ref.validationMessage,
+      _onChange = _ref.onChange,
+      margin = _ref.margin;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TextareaWrapper, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TextArea, {
+      id: id,
+      value: value,
+      placeholder: placeholder,
+      className: "".concat(size, " ").concat(validationType),
+      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) || '');
+      }
+    }), validationMessage && validationType === 'warning' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.WarningMessage, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
+        size: "20px",
+        color: _styles.COLORS.warning_400
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: validationMessage
+      })]
+    }), validationMessage && validationType === 'error' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
+        size: "20px",
+        color: _styles.COLORS.critical_400
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: validationMessage
+      })]
+    })]
+  });
+};
+
+Textarea.propTypes = {
+  id: _propTypes.default.string.isRequired,
+  placeholder: _propTypes.default.string.isRequired,
+  value: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  onChange: _propTypes.default.func,
+  validationType: _propTypes.default.oneOf(['error', 'warning']),
+  validationMessage: _propTypes.default.string,
+  margin: _propTypes.default.string
+};
+var _default = Textarea;
+exports.default = _default;
+//# sourceMappingURL=Textarea.cjs.map

package/dist/InputFields/Textarea.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/InputFields/Textarea.tsx"],"names":["TextareaWrapper","styled","div","props","margin","TextArea","textarea","COLORS","neutral_400","white","ComponentTextStyle","Italic","black","primary_700","primary_800","focus_25","focus","warning_500","critical_500","neutral_100","neutral_300","neutral_600","Textarea","id","placeholder","value","size","disabled","validationType","validationMessage","onChange","e","target","warning_400","critical_400"],"mappings":";;;;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AAMA;;AAKA;;AACA;;;;;;;;;;AAEA;AACA,IAAMA,eAAe,GAAGC,0BAAOC,GAAV,8GAEjB,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAxD;AAAA,CAFiB,CAArB;;AAIA,IAAMC,QAAQ,GAAGJ,0BAAOK,QAAV,8vCACQC,eAAOC,WADf,EAEED,eAAOE,KAFT,EAQV,mCAAkBC,+BAAmBC,MAArC,EAA6CJ,eAAOK,KAApD,CARU,EAmBUL,eAAOM,WAnBjB,EAyBUN,eAAOO,WAzBjB,EA2BiBP,eAAOQ,QA3BxB,EA2BiDR,eAAOS,KA3BxD,EAoCkCT,eAAOU,WApCzC,EAqC+BV,eAAOU,WArCtC,EAsC0BV,eAAOU,WAtCjC,EA+CkCV,eAAOW,YA/CzC,EAgD+BX,eAAOW,YAhDtC,EAiD0BX,eAAOW,YAjDjC,EAwDUX,eAAOY,WAxDjB,EA6DCZ,eAAOa,WA7DR,EAkER,mCAAkBV,+BAAmBC,MAArC,EAA6CJ,eAAOc,WAApD,CAlEQ,CAAd,C,CAsEA;;;AAaA,IAAMC,QAAgD,GAAG,SAAnDA,QAAmD,OAAoH;AAAA,MAAjHC,EAAiH,QAAjHA,EAAiH;AAAA,MAA7GC,WAA6G,QAA7GA,WAA6G;AAAA,MAAhGC,KAAgG,QAAhGA,KAAgG;AAAA,MAAzFC,IAAyF,QAAzFA,IAAyF;AAAA,MAAnFC,QAAmF,QAAnFA,QAAmF;AAAA,MAAzEC,cAAyE,QAAzEA,cAAyE;AAAA,MAAzDC,iBAAyD,QAAzDA,iBAAyD;AAAA,MAAtCC,SAAsC,QAAtCA,QAAsC;AAAA,MAA5B1B,MAA4B,QAA5BA,MAA4B;AAC3K,sBACE,sBAAC,eAAD;AAAA,4BACE,qBAAC,QAAD;AACE,MAAA,EAAE,EAAEmB,EADN;AAEE,MAAA,KAAK,EAAEE,KAFT;AAGE,MAAA,WAAW,EAAED,WAHf;AAIE,MAAA,SAAS,YAAKE,IAAL,cAAaE,cAAb,CAJX;AAKE,MAAA,QAAQ,EAAED,QALZ;AAME,MAAA,QAAQ,EAAE,kBAACI,CAAD;AAAA;;AAAA,eAAYD,SAAQ,IAAIA,SAAQ,CAAC,CAAAC,CAAC,SAAD,IAAAA,CAAC,WAAD,yBAAAA,CAAC,CAAEC,MAAH,wDAAWP,KAAX,KAAoB,EAArB,CAAhC;AAAA;AANZ,MADF,EASGI,iBAAiB,IAAID,cAAc,KAAK,SAAxC,iBACC,sBAAC,uBAAD;AAAA,8BACE,qBAAC,6BAAD;AAAkB,QAAA,IAAI,EAAC,MAAvB;AAA8B,QAAA,KAAK,EAAErB,eAAO0B;AAA5C,QADF,eAEE;AAAA,kBAAOJ;AAAP,QAFF;AAAA,MAVJ,EAeGA,iBAAiB,IAAID,cAAc,KAAK,OAAxC,iBACC,sBAAC,qBAAD;AAAA,8BACE,qBAAC,6BAAD;AAAkB,QAAA,IAAI,EAAC,MAAvB;AAA8B,QAAA,KAAK,EAAErB,eAAO2B;AAA5C,QADF,eAEE;AAAA,kBAAOL;AAAP,QAFF;AAAA,MAhBJ;AAAA,IADF;AAwBD,CAzBD;;;AAXEN,EAAAA,E;AACAC,EAAAA,W;AACAC,EAAAA,K;AACAE,EAAAA,Q;AACAG,EAAAA,Q;AACAF,EAAAA,c,4BAAiB,O,EAAU,S;AAC3BC,EAAAA,iB;AAEAzB,EAAAA,M;;eA8BakB,Q","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\nimport { ErrorMessage, WarningMessage } from './styling';\nimport { Size } from '../types';\n\n/**\n * Import custom components.\n */\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 1px;\n  padding: 16px;\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    width: 304px;\n  }\n\n  &.medium {\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 0px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\n    margin: 0px;\n    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};\n  }\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus,\n  &.warning:active {\n    border: none;\n    margin: 1px;\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus,\n  &.error:active {\n    border: none;\n    margin: 1px;\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 1px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n`;\n\n// Add component-specific types\ntype TextareaProps = {\n  id: string;\n  placeholder: string;\n  value?: string;\n  disabled?: boolean;\n  onChange?: (text: string) => void;\n  validationType?: 'error' | 'warning';\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst Textarea: React.FunctionComponent<TextareaProps> = ({ id, placeholder, value, size, disabled, validationType, validationMessage, onChange, margin }: TextareaProps) => {\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        value={value}\n        placeholder={placeholder}\n        className={`${size} ${validationType}`}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n      />\n      {validationMessage && validationType === 'warning' && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      )}\n      {validationMessage && validationType === 'error' && (\n        <ErrorMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </TextareaWrapper>\n  );\n};\n\nexport default Textarea;\n"],"file":"Textarea.cjs"}

package/dist/InputFields/Textarea.js

@@ -0,0 +1,86 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2;
+
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+/**
+ * Import custom styles.
+ */
+
+import { COLORS } from '../styles';
+import { ErrorMessage, WarningMessage } from './styling';
+
+/**
+ * Import custom components.
+ */
+import { TechnicalWarning } from '../icons/systemicons/SystemIcons';
+/**
+ * Import third-party libraries.
+ */
+
+import styled from 'styled-components';
+import { ComponentMStyling, ComponentTextStyle } from '../styles/typography'; // 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  border: 1px solid ", ";\n  background: ", ";\n  border-radius: 4px;\n  outline: none;\n  margin: 1px;\n  padding: 16px;\n\n  ", "\n\n  &.small {\n    width: 304px;\n  }\n\n  &.medium {\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ", ";\n    margin: 0px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ", ";\n    margin: 0px;\n    box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", ";\n  }\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus,\n  &.warning:active {\n    border: none;\n    margin: 1px;\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus,\n  &.error:active {\n    border: none;\n    margin: 1px;\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ", ";\n    margin: 1px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  &::placeholder {\n    ", "\n  }\n"])), COLORS.neutral_400, COLORS.white, ComponentMStyling(ComponentTextStyle.Italic, COLORS.black), COLORS.primary_700, COLORS.primary_800, COLORS.focus_25, COLORS.focus, COLORS.warning_500, COLORS.warning_500, COLORS.warning_500, COLORS.critical_500, COLORS.critical_500, COLORS.critical_500, COLORS.neutral_100, COLORS.neutral_300, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)); // Add component-specific types
+
+var Textarea = function Textarea(_ref) {
+  var id = _ref.id,
+      placeholder = _ref.placeholder,
+      value = _ref.value,
+      size = _ref.size,
+      disabled = _ref.disabled,
+      validationType = _ref.validationType,
+      validationMessage = _ref.validationMessage,
+      _onChange = _ref.onChange,
+      margin = _ref.margin;
+  return /*#__PURE__*/_jsxs(TextareaWrapper, {
+    children: [/*#__PURE__*/_jsx(TextArea, {
+      id: id,
+      value: value,
+      placeholder: placeholder,
+      className: "".concat(size, " ").concat(validationType),
+      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) || '');
+      }
+    }), validationMessage && validationType === 'warning' && /*#__PURE__*/_jsxs(WarningMessage, {
+      children: [/*#__PURE__*/_jsx(TechnicalWarning, {
+        size: "20px",
+        color: COLORS.warning_400
+      }), /*#__PURE__*/_jsx("span", {
+        children: validationMessage
+      })]
+    }), validationMessage && validationType === 'error' && /*#__PURE__*/_jsxs(ErrorMessage, {
+      children: [/*#__PURE__*/_jsx(TechnicalWarning, {
+        size: "20px",
+        color: COLORS.critical_400
+      }), /*#__PURE__*/_jsx("span", {
+        children: validationMessage
+      })]
+    })]
+  });
+};
+
+Textarea.propTypes = {
+  id: _pt.string.isRequired,
+  placeholder: _pt.string.isRequired,
+  value: _pt.string,
+  disabled: _pt.bool,
+  onChange: _pt.func,
+  validationType: _pt.oneOf(['error', 'warning']),
+  validationMessage: _pt.string,
+  margin: _pt.string
+};
+export default Textarea;
+//# sourceMappingURL=Textarea.js.map

package/dist/InputFields/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/InputFields/Textarea.tsx"],"names":["React","COLORS","ErrorMessage","WarningMessage","TechnicalWarning","styled","ComponentMStyling","ComponentTextStyle","TextareaWrapper","div","props","margin","TextArea","textarea","neutral_400","white","Italic","black","primary_700","primary_800","focus_25","focus","warning_500","critical_500","neutral_100","neutral_300","neutral_600","Textarea","id","placeholder","value","size","disabled","validationType","validationMessage","onChange","e","target","warning_400","critical_400"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { COLORS } from '../styles';\nimport { ErrorMessage, WarningMessage } from './styling';\nimport { Size } from '../types';\n\n/**\n * Import custom components.\n */\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles/typography';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 1px;\n  padding: 16px;\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    width: 304px;\n  }\n\n  &.medium {\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 0px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\n    margin: 0px;\n    box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus};\n  }\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus,\n  &.warning:active {\n    border: none;\n    margin: 1px;\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus,\n  &.error:active {\n    border: none;\n    margin: 1px;\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 1px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n`;\n\n// Add component-specific types\ntype TextareaProps = {\n  id: string;\n  placeholder: string;\n  value?: string;\n  disabled?: boolean;\n  onChange?: (text: string) => void;\n  validationType?: 'error' | 'warning';\n  validationMessage?: string;\n  size: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst Textarea: React.FunctionComponent<TextareaProps> = ({ id, placeholder, value, size, disabled, validationType, validationMessage, onChange, margin }: TextareaProps) => {\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        value={value}\n        placeholder={placeholder}\n        className={`${size} ${validationType}`}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n      />\n      {validationMessage && validationType === 'warning' && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      )}\n      {validationMessage && validationType === 'error' && (\n        <ErrorMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </TextareaWrapper>\n  );\n};\n\nexport default Textarea;\n"],"file":"Textarea.js"}

package/dist/InputFields/components/SearchBarInput.cjs

@@ -0,0 +1,99 @@
+"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 = exports.BigSearch = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _index = require("../../styles/index");
+
+var _styles = require("../../styles");
+
+var _FocusVisible = require("../../common/FocusVisible");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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  ", "\n    /* To prevent browser putting its own cross inside the search bar */\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  &:focus {\n    outline-width: 0;\n  }\n"])), (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500));
+
+exports.Search = Search;
+var BigSearch = (0, _styledComponents.default)(Search)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 32px;\n  border-width: 0;\n  margin-left: 50px;\n  outline: none;\n\n  ", "\n  ::placeholder {\n    ", "\n  }\n\n  ", " {\n    ::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ::placeholder {\n      ", "\n    }\n  }\n\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n"])), (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_600), _index.BREAKPOINTS.MEDIUM, (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_600), (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_600), (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_600));
+exports.BigSearch = BigSearch;
+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;
+  var elementRef = (0, _FocusVisible.useFocusVisibleRef)(props.focusParentRefs || [], ref);
+
+  var isPressingEnter = function isPressingEnter(e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.stopPropagation();
+      return true;
+    }
+
+    return false;
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BigSearch, {
+    placeholder: disabled ? '' : placeholder,
+    ref: elementRef,
+    id: id,
+    "data-testid": id,
+    className: size ? size : '',
+    tabIndex: 0,
+    disabled: disabled,
+    onChange: function onChange(e) {
+      return setSearchTerm(e.target.value);
+    },
+    value: searchTerm,
+    onBlur: function onBlur(e) {
+      return _onBlur && _onBlur(e);
+    },
+    onKeyDown: onKeyDown,
+    onKeyPress: function onKeyPress(e) {
+      return isPressingEnter(e) ? enterSearch(e) : null;
+    }
+  });
+});
+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
+};
+var _default = SearchBarInput;
+exports.default = _default;
+//# sourceMappingURL=SearchBarInput.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"names":["Search","styled","input","attrs","type","ComponentTextStyle","Regular","COLORS","black","Italic","neutral_500","BigSearch","neutral_600","BREAKPOINTS","MEDIUM","SearchBarInput","React","forwardRef","props","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","elementRef","focusParentRefs","isPressingEnter","e","key","preventDefault","stopPropagation","target","value"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles/index';\nimport {Size} from '../../types';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles';\nimport {useFocusVisibleRef} from '../../common/FocusVisible';\n\nexport const Search = styled.input.attrs(() => ({type: 'search'}))`\n  appearance: none;\n  width: calc(100% - 96px);\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    /* To prevent browser putting its own cross inside the search bar */\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    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  &:focus {\n    outline-width: 0;\n  }\n`;\n\nexport const BigSearch = styled(Search)`\n  height: 32px;\n  border-width: 0;\n  margin-left: 50px;\n  outline: none;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    ::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n`;\n\ntype SearchBarInputProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  onBlur?: (e: any) => void;\n  focusParentRefs?: React.RefObject<any>[];\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const {\n    id,\n    searchTerm,\n    setSearchTerm,\n    enterSearch,\n    placeholder,\n    disabled,\n    onKeyDown,\n    size,\n    onBlur\n  } = props;\n\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || [], ref);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <BigSearch\n      placeholder={disabled ? '' : placeholder}\n      ref={elementRef}\n      id={id}\n      data-testid={id}\n      className={size ? size : ''}\n      tabIndex={0}\n      disabled={disabled}\n      onChange={(e: any) => setSearchTerm(e.target.value)}\n      value={searchTerm}\n      onBlur={(e) => onBlur && onBlur(e)}\n      onKeyDown={onKeyDown}\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"file":"SearchBarInput.cjs"}

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Size } from '../../types';
+export declare const Search: import("styled-components").StyledComponent<"input", any, {
+    type: "search";
+}, "type">;
+export declare const BigSearch: import("styled-components").StyledComponent<"input", any, {
+    type: "search";
+}, "type">;
+declare type SearchBarInputProps = {
+    id: string;
+    searchTerm?: string;
+    setSearchTerm: (term: string) => void;
+    enterSearch: (e: any) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    onKeyDown?: (e: React.KeyboardEvent) => void;
+    size?: Size.Small | Size.Medium;
+    onBlur?: (e: any) => void;
+    focusParentRefs?: React.RefObject<any>[];
+};
+declare const SearchBarInput: React.ForwardRefExoticComponent<SearchBarInputProps & React.RefAttributes<HTMLInputElement>>;
+export default SearchBarInput;