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

package/dist/InputFields/TextField.js

@@ -1,121 +1,51 @@
-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
+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;

package/dist/InputFields/Textarea.js

@@ -1,96 +1,65 @@
-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; }
+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 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.
-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
+ */
+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;

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">;
-type SearchBarInputProps = {
+declare type SearchBarInputProps = {
     id: string;
     searchTerm?: string;
     setSearchTerm: (term: string) => void;

package/dist/InputFields/components/SearchBarInput.js

@@ -1,73 +1,26 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-var _templateObject;
-import * as React from 'react';
-import styled from 'styled-components';
-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 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"])), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600));
-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();
-      return true;
-    }
-    return false;
-  };
-  return /*#__PURE__*/_jsx(Search, {
-    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;
-    },
-    onClick: onClick
-  });
-});
-SearchBarInput.propTypes = {
-  id: _pt.string.isRequired,
-  searchTerm: _pt.string,
-  setSearchTerm: _pt.func.isRequired,
-  enterSearch: _pt.func.isRequired,
-  placeholder: _pt.string,
-  disabled: _pt.bool,
-  onKeyDown: _pt.func,
-  onBlur: _pt.func,
-  focusParentRefs: _pt.array,
-  onClick: _pt.func
-};
-export default SearchBarInput;
-//# sourceMappingURL=SearchBarInput.js.map
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import * as React from 'react';
+import styled from 'styled-components';
+import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';
+import { ComponentMStyling, ComponentSStyling } from '../../styles';
+import { useFocusVisibleRef } from '../../common';
+export var Search = styled.input.attrs(function () { return ({ type: 'search' }); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\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"])), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600));
+var SearchBarInput = 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 (e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            e.stopPropagation();
+            return true;
+        }
+        return false;
+    };
+    return (React.createElement(Search, { placeholder: disabled ? '' : placeholder, ref: elementRef, id: id, "data-testid": id, className: size ? size : '', tabIndex: 0, disabled: disabled, onChange: function (e) { return setSearchTerm(e.target.value); }, value: searchTerm, onBlur: function (e) { return onBlur && onBlur(e); }, onKeyDown: onKeyDown, onKeyPress: function (e) { return (isPressingEnter(e) ? enterSearch(e) : null); }, onClick: onClick }));
+});
+export default SearchBarInput;
+var templateObject_1;

package/dist/InputFields/components/SearchField.js

@@ -1,45 +1,44 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-import _pt from "prop-types";
-var _excluded = ["id", "searchTerm", "disabled", "validationMessage", "children", "size", "className"];
-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 * as React from 'react';
-import styled from 'styled-components';
-import { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';
-import { ComponentMStyling, ComponentSStyling } from '../../styles';
-import { jsx as _jsx } from "react/jsx-runtime";
-export var SearchFieldWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.focus-visible-within {\n    ", "\n  }\n"])), focusStyles);
-export var StyledSearchField = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ", ";\n  margin-bottom: 4px;\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ", ";\n\n  ", "\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ", "\n  }\n\n  ", " {\n    ", "\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    height: 56px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  div {\n    color: ", ";\n    background-color: transparent;\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ", ";\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n"])), COLORS.neutral_400, COLORS.white, ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), 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, COLORS.primary_800, COLORS.neutral_600, COLORS.critical_400, COLORS.neutral_100);
-var SearchField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var id = _ref.id,
-    searchTerm = _ref.searchTerm,
-    disabled = _ref.disabled,
-    validationMessage = _ref.validationMessage,
-    children = _ref.children,
-    size = _ref.size,
-    className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var cls = (disabled ? 'disabled ' : '').concat(searchTerm !== '' ? 'searchactive ' : '').concat(size ? "".concat(size, " ") : '').concat(validationMessage ? ' invalid ' : '').concat("".concat(className !== null && className !== void 0 ? className : '', " "));
-  return /*#__PURE__*/_jsx(SearchFieldWrapper, {
-    ref: ref,
-    children: /*#__PURE__*/_jsx(StyledSearchField, _objectSpread(_objectSpread({
-      id: "".concat(id, "_main"),
-      "data-testid": "".concat(id, "_main"),
-      className: cls
-    }, rest), {}, {
-      children: children
-    }))
-  });
-});
-SearchField.propTypes = {
-  id: _pt.string.isRequired,
-  searchTerm: _pt.string,
-  disabled: _pt.bool,
-  validationMessage: _pt.string,
-  children: _pt.any.isRequired
-};
-export default SearchField;
-//# sourceMappingURL=SearchField.js.map
+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 * as React from 'react';
+import styled from 'styled-components';
+import { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';
+import { ComponentMStyling, ComponentSStyling } from '../../styles';
+export var SearchFieldWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.focus-visible-within {\n    ", "\n  }\n"], ["\n  &.focus-visible-within {\n    ", "\n  }\n"])), focusStyles);
+export var StyledSearchField = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ", ";\n  margin-bottom: 4px;\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ", ";\n\n  ", "\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ", "\n  }\n\n  ", " {\n    ", "\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    height: 56px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  div {\n    color: ", ";\n    background-color: transparent;\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ", ";\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ", ";\n  margin-bottom: 4px;\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ", ";\n\n  ", "\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ", "\n  }\n\n  ", " {\n    ", "\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    height: 56px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  div {\n    color: ", ";\n    background-color: transparent;\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ", ";\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n"])), COLORS.neutral_400, COLORS.white, ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), 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, COLORS.primary_800, COLORS.neutral_600, COLORS.critical_400, COLORS.neutral_100);
+var SearchField = React.forwardRef(function (_a, ref) {
+    var id = _a.id, searchTerm = _a.searchTerm, disabled = _a.disabled, validationMessage = _a.validationMessage, children = _a.children, size = _a.size, className = _a.className, rest = __rest(_a, ["id", "searchTerm", "disabled", "validationMessage", "children", "size", "className"]);
+    var cls = (disabled ? 'disabled ' : '')
+        .concat(searchTerm !== '' ? 'searchactive ' : '')
+        .concat(size ? "".concat(size, " ") : '')
+        .concat(validationMessage ? ' invalid ' : '')
+        .concat("".concat(className !== null && className !== void 0 ? className : '', " "));
+    return (React.createElement(SearchFieldWrapper, { ref: ref },
+        React.createElement(StyledSearchField, __assign({ id: "".concat(id, "_main"), "data-testid": "".concat(id, "_main"), className: cls }, rest), children)));
+});
+export default SearchField;
+var templateObject_1, templateObject_2;

package/dist/InputFields/index.js

@@ -1,14 +1,13 @@
-import TextField from './TextField';
-import PasswordField from './PasswordField';
-import Checkbox from './Checkbox';
-import RadioButton from './RadioButton';
-import SearchBar from './SearchBar';
-import InputLabel from './Label';
-import DatepickerField from './DatepickerField';
-import Textarea from './Textarea';
-import QuickSearch from './QuickSearch';
-import NumberField from './NumberField';
-export * from './styling';
-export * from './RichTextField';
-export { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };
-//# sourceMappingURL=index.js.map
+import TextField from './TextField';
+import PasswordField from './PasswordField';
+import Checkbox from './Checkbox';
+import RadioButton from './RadioButton';
+import SearchBar from './SearchBar';
+import InputLabel from './Label';
+import DatepickerField from './DatepickerField';
+import Textarea from './Textarea';
+import QuickSearch from './QuickSearch';
+import NumberField from './NumberField';
+export * from './styling';
+export * from './RichTextField';
+export { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };