@laerdal/life-react-components 1.7.0 → 1.8.0-dev.10

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

@@ -3,9 +3,6 @@ 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;

package/dist/InputFields/components/SearchBarInput.js

@@ -1,20 +1,19 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 
-var _templateObject, _templateObject2;
+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/FocusVisible';
+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  ", "\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"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500));
-export var BigSearch = styled(Search)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), ComponentMStyling(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.Italic, COLORS.neutral_600));
+})(_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: 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"])), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentMStyling(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.Italic, COLORS.neutral_600));
 var SearchBarInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var id = props.id,
       searchTerm = props.searchTerm,
@@ -37,7 +36,7 @@ var SearchBarInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return false;
   };
 
-  return /*#__PURE__*/_jsx(BigSearch, {
+  return /*#__PURE__*/_jsx(Search, {
     placeholder: disabled ? '' : placeholder,
     ref: elementRef,
     id: id,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","useFocusVisibleRef","Search","input","attrs","type","Regular","black","Italic","neutral_500","BigSearch","neutral_600","MEDIUM","SearchBarInput","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.js"}
+{"version":3,"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","useFocusVisibleRef","Search","input","attrs","type","Italic","neutral_500","Regular","black","neutral_600","MEDIUM","SearchBarInput","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';\n\nexport const Search = styled.input.attrs(() => ({type: 'search'}))`\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    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\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\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    <Search\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.js"}

package/dist/InputFields/components/SearchField.cjs

@@ -7,7 +7,11 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StyledSearchField = void 0;
+exports.default = exports.StyledSearchField = exports.SearchFieldWrapper = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -15,31 +19,31 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var React = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _index = require("../../styles/index");
 
-var _styling = require("../styling");
-
 var _styles = require("../../styles");
 
-var _zIndexes = require("../../styles/z-indexes");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
+var _excluded = ["id", "searchTerm", "disabled", "validationMessage", "children", "size", "className"];
+
 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 DisabledState = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid ", ";\n  pointer-events: none;\n  background-color: transparent !important;\n  box-shadow: none !important;\n"])), _index.COLORS.neutral_100);
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-var StyledSearchField = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0px 0px 0px 1px ", ";\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 0px 0px 0px 2px ", ";\n    border-color: transparent;\n  }\n\n  &.focus-visible-within{\n    outline: none;\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    z-index: ", ";\n  }\n  \n  &:focus-within {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    border-color: transparent;\n  }\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n\n  div {\n    color: ", ";\n    background-color: transparent;\n  }\n\n  ", "\n  ", "\n"])), _index.COLORS.neutral_400, _index.COLORS.white, (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500), _index.BREAKPOINTS.MEDIUM, (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500), (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500), (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500), _index.COLORS.primary_700, _zIndexes.Z_INDEXES.focus, _index.COLORS.primary_800, _index.COLORS.neutral_100, _index.COLORS.neutral_600, function (props) {
-  return props.disabled ? DisabledState : '';
-}, function (props) {
-  return props.activeValidationMessage ? _styling.activeValidationMessageState : '';
-});
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var SearchFieldWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &.focus-visible-within {\n    ", "\n  }\n"])), _index.focusStyles);
+
+exports.SearchFieldWrapper = SearchFieldWrapper;
+
+var StyledSearchField = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ", ";\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"])), _index.COLORS.neutral_400, _index.COLORS.white, (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500), _index.BREAKPOINTS.MEDIUM, (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500), (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500), (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500), _index.COLORS.primary_800, _index.COLORS.primary_800, _index.COLORS.neutral_600, _index.COLORS.critical_400, _index.COLORS.neutral_100);
 
 exports.StyledSearchField = StyledSearchField;
 var SearchField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -48,14 +52,19 @@ var SearchField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       disabled = _ref.disabled,
       validationMessage = _ref.validationMessage,
       children = _ref.children,
-      size = _ref.size;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSearchField, {
-    id: "".concat(id, "_main"),
+      size = _ref.size,
+      className = _ref.className,
+      rest = (0, _objectWithoutProperties2.default)(_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__*/(0, _jsxRuntime.jsx)(SearchFieldWrapper, {
     ref: ref,
-    className: (searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : ''),
-    disabled: disabled,
-    activeValidationMessage: validationMessage !== undefined && validationMessage !== '',
-    children: children
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSearchField, _objectSpread(_objectSpread({
+      id: "".concat(id, "_main"),
+      "data-testid": "".concat(id, "_main"),
+      className: cls
+    }, rest), {}, {
+      children: children
+    }))
   });
 });
 SearchField.propTypes = {
@@ -63,8 +72,7 @@ SearchField.propTypes = {
   searchTerm: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   validationMessage: _propTypes.default.string,
-  children: _propTypes.default.any.isRequired,
-  size: _propTypes.default.string.isRequired
+  children: _propTypes.default.any.isRequired
 };
 var _default = SearchField;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/components/SearchField.tsx"],"names":["DisabledState","css","COLORS","neutral_100","StyledSearchField","styled","div","neutral_400","white","ComponentTextStyle","Regular","black","Italic","neutral_500","BREAKPOINTS","MEDIUM","primary_700","Z_INDEXES","focus","primary_800","neutral_600","props","disabled","activeValidationMessage","activeValidationMessageState","SearchField","React","forwardRef","ref","id","searchTerm","validationMessage","children","size","concat","undefined"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,aAAa,OAAGC,qBAAH,wNACGC,cAAOC,WADV,CAAnB;;AAOO,IAAMC,iBAAiB,GAAGC,0BAAOC,GAAV,kzCAGQJ,cAAOK,WAHf,EAURL,cAAOM,KAVC,EAY1B,+BAAkBC,0BAAmBC,OAArC,EAA8CR,cAAOS,KAArD,CAZ0B,EAkBxB,+BAAkBF,0BAAmBG,MAArC,EAA6CV,cAAOW,WAApD,CAlBwB,EAqB1BC,mBAAYC,MArBc,EAsBxB,+BAAkBN,0BAAmBC,OAArC,EAA8CR,cAAOS,KAArD,CAtBwB,EA4BtB,+BAAkBF,0BAAmBG,MAArC,EAA6CV,cAAOW,WAApD,CA5BsB,EAiCxB,+BAAkBJ,0BAAmBC,OAArC,EAA8CR,cAAOS,KAArD,CAjCwB,EAsCtB,+BAAkBF,0BAAmBG,MAArC,EAA6CV,cAAOW,WAApD,CAtCsB,EA2CxB,+BAAkBJ,0BAAmBC,OAArC,EAA8CR,cAAOS,KAArD,CA3CwB,EA+CtB,+BAAkBF,0BAAmBG,MAArC,EAA6CV,cAAOW,WAApD,CA/CsB,EAoDUX,cAAOc,WApDjB,EA2DfC,oBAAUC,KA3DK,EA+DUhB,cAAOiB,WA/DjB,EAoENjB,cAAOC,WApED,EA0EjBD,cAAOkB,WA1EU,EA8E1B,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,QAAN,GAAiBtB,aAAjB,GAAiC,EAA7C;AAAA,CA9E0B,EA+E1B,UAACqB,KAAD;AAAA,SAAYA,KAAK,CAACE,uBAAN,GAAgCC,qCAAhC,GAA+D,EAA3E;AAAA,CA/E0B,CAAvB;;;AA2FP,IAAMC,WAAW,gBAAGC,KAAK,CAACC,UAAN,CAAkD,gBAOMC,GAPN,EAOc;AAAA,MANTC,EAMS,QANTA,EAMS;AAAA,MALTC,UAKS,QALTA,UAKS;AAAA,MAJTR,QAIS,QAJTA,QAIS;AAAA,MAHTS,iBAGS,QAHTA,iBAGS;AAAA,MAFTC,QAES,QAFTA,QAES;AAAA,MADTC,IACS,QADTA,IACS;AAClF,sBACE,qBAAC,iBAAD;AACE,IAAA,EAAE,YAAKJ,EAAL,UADJ;AAEE,IAAA,GAAG,EAAED,GAFP;AAGE,IAAA,SAAS,EAAE,CAACE,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EAAvC,EAA2CI,MAA3C,CAAkDD,IAAI,GAAGA,IAAH,GAAU,EAAhE,CAHb;AAIE,IAAA,QAAQ,EAAEX,QAJZ;AAKE,IAAA,uBAAuB,EAAES,iBAAiB,KAAKI,SAAtB,IAAmCJ,iBAAiB,KAAK,EALpF;AAAA,cAMGC;AANH,IADF;AAUD,CAlBmB,CAApB;;AAREH,EAAAA,E;AACAC,EAAAA,U;AACAR,EAAAA,Q;AACAS,EAAAA,iB;AACAC,EAAAA,Q;AACAC,EAAAA,I;;eAuBaR,W","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles/index';\nimport {activeValidationMessageState} from '../styling';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles';\nimport {Z_INDEXES} from '../../styles/z-indexes';\n\nconst DisabledState = css`\n  border: 1px solid ${COLORS.neutral_100};\n  pointer-events: none;\n  background-color: transparent !important;\n  box-shadow: none !important;\n`;\n\nexport const StyledSearchField = styled.div<{ disabled?: boolean; activeValidationMessage?: boolean; }>`\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\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: ${COLORS.white};\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    border-color: transparent;\n  }\n\n  &.focus-visible-within{\n    outline: none;\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    z-index: ${Z_INDEXES.focus};\n  }\n  \n  &:focus-within {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    border-color: transparent;\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n\n  div {\n    color: ${COLORS.neutral_600};\n    background-color: transparent;\n  }\n\n  ${(props) => (props.disabled ? DisabledState : '')}\n  ${(props) => (props.activeValidationMessage ? activeValidationMessageState : '')}\n`;\n\ntype SeachFieldProps = {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  size: string;\n};\n\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({\n                                                                           id,\n                                                                           searchTerm,\n                                                                           disabled,\n                                                                           validationMessage,\n                                                                           children,\n                                                                           size\n                                                                         }, ref) => {\n  return (\n    <StyledSearchField\n      id={`${id}_main`}\n      ref={ref}\n      className={(searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '')}\n      disabled={disabled}\n      activeValidationMessage={validationMessage !== undefined && validationMessage !== ''}>\n      {children}\n    </StyledSearchField>\n  );\n});\n\nexport default SearchField;\n"],"file":"SearchField.cjs"}
+{"version":3,"sources":["../../../src/InputFields/components/SearchField.tsx"],"names":["SearchFieldWrapper","styled","div","focusStyles","StyledSearchField","COLORS","neutral_400","white","ComponentTextStyle","Regular","black","Italic","neutral_500","BREAKPOINTS","MEDIUM","primary_800","neutral_600","critical_400","neutral_100","SearchField","React","forwardRef","ref","id","searchTerm","disabled","validationMessage","children","size","className","rest","cls","concat"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAKO,IAAMA,kBAAkB,GAAGC,0BAAOC,GAAV,iIAEzBC,kBAFyB,CAAxB;;;;AAMA,IAAMC,iBAAiB,GAAGH,0BAAOC,GAAV,8nCAGEG,cAAOC,WAHT,EAURD,cAAOE,KAVC,EAY1B,+BAAkBC,0BAAmBC,OAArC,EAA8CJ,cAAOK,KAArD,CAZ0B,EAkBxB,+BAAkBF,0BAAmBG,MAArC,EAA6CN,cAAOO,WAApD,CAlBwB,EAqB1BC,mBAAYC,MArBc,EAsBxB,+BAAkBN,0BAAmBC,OAArC,EAA8CJ,cAAOK,KAArD,CAtBwB,EA4BtB,+BAAkBF,0BAAmBG,MAArC,EAA6CN,cAAOO,WAApD,CA5BsB,EAiCxB,+BAAkBJ,0BAAmBC,OAArC,EAA8CJ,cAAOK,KAArD,CAjCwB,EAsCtB,+BAAkBF,0BAAmBG,MAArC,EAA6CN,cAAOO,WAApD,CAtCsB,EA2CxB,+BAAkBJ,0BAAmBC,OAArC,EAA8CJ,cAAOK,KAArD,CA3CwB,EA+CtB,+BAAkBF,0BAAmBG,MAArC,EAA6CN,cAAOO,WAApD,CA/CsB,EAoDIP,cAAOU,WApDX,EAwDIV,cAAOU,WAxDX,EA4DjBV,cAAOW,WA5DU,EAiEIX,cAAOY,YAjEX,EAqEIZ,cAAOa,WArEX,CAAvB;;;AAqFP,IAAMC,WAAW,gBAAGC,KAAK,CAACC,UAAN,CAAkD,gBASIC,GATJ,EASY;AAAA,MARTC,EAQS,QARTA,EAQS;AAAA,MAPTC,UAOS,QAPTA,UAOS;AAAA,MANTC,QAMS,QANTA,QAMS;AAAA,MALTC,iBAKS,QALTA,iBAKS;AAAA,MAJTC,QAIS,QAJTA,QAIS;AAAA,MAHTC,IAGS,QAHTA,IAGS;AAAA,MAFTC,SAES,QAFTA,SAES;AAAA,MADNC,IACM;AAEhF,MAAMC,GAAG,GACP,CAACN,QAAQ,GAAG,WAAH,GAAiB,EAA1B,EACGO,MADH,CACUR,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EADhD,EAEGQ,MAFH,CAEUJ,IAAI,aAAMA,IAAN,SAAgB,EAF9B,EAGGI,MAHH,CAGUN,iBAAiB,GAAG,WAAH,GAAiB,EAH5C,EAIGM,MAJH,WAIaH,SAJb,aAIaA,SAJb,cAIaA,SAJb,GAI0B,EAJ1B,OADF;AAOA,sBACE,qBAAC,kBAAD;AAAoB,IAAA,GAAG,EAAEP,GAAzB;AAAA,2BACE,qBAAC,iBAAD;AACE,MAAA,EAAE,YAAKC,EAAL,UADJ;AAEE,+BAAgBA,EAAhB,UAFF;AAGE,MAAA,SAAS,EAAEQ;AAHb,OAIMD,IAJN;AAAA,gBAKGH;AALH;AADF,IADF;AAWD,CA7BmB,CAApB;;AAREJ,EAAAA,E;AACAC,EAAAA,U;AACAC,EAAAA,Q;AACAC,EAAAA,iB;AACAC,EAAAA,Q;;eAmCaR,W","sourcesContent":["import * as React from 'react';\nimport styled, {css, CSSProperties} from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../../styles/index';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles';\nimport {Z_INDEXES} from '../../styles/z-indexes';\nimport {Size} from '../../types';\nimport {activeErrorMessageState} from '../styling';\n\nexport const SearchFieldWrapper = styled.div`\n  &.focus-visible-within {\n    ${focusStyles}\n  }\n`;\n\nexport const StyledSearchField = styled.div<{ activeValidationMessage?: boolean; }>`\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\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: ${COLORS.white};\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  div {\n    color: ${COLORS.neutral_600};\n    background-color: transparent;\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n\n`;\n\ntype SeachFieldProps = React.HTMLAttributes<HTMLDivElement> & {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  size?: Size.Small | Size.Medium;\n};\n\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({\n                                                                         id,\n                                                                         searchTerm,\n                                                                         disabled,\n                                                                         validationMessage,\n                                                                         children,\n                                                                         size,\n                                                                         className,\n                                                                         ...rest\n                                                                       }, ref) => {\n\n  const cls =\n    (disabled ? 'disabled ' : '')\n      .concat(searchTerm !== '' ? 'searchactive ' : '')\n      .concat(size ? `${size} ` : '')\n      .concat(validationMessage ? ' invalid ' : '')\n      .concat(`${className ?? ''} `);\n\n  return (\n    <SearchFieldWrapper ref={ref}>\n      <StyledSearchField\n        id={`${id}_main`}\n        data-testid={`${id}_main`}\n        className={cls}\n        {...rest}>\n        {children}\n      </StyledSearchField>\n    </SearchFieldWrapper>\n  );\n});\n\nexport default SearchField;\n"],"file":"SearchField.cjs"}

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

@@ -1,15 +1,15 @@
 import * as React from 'react';
+import { Size } from '../../types';
+export declare const SearchFieldWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledSearchField: import("styled-components").StyledComponent<"div", any, {
-    disabled?: boolean | undefined;
     activeValidationMessage?: boolean | undefined;
 }, never>;
-declare type SeachFieldProps = {
+declare const SearchField: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     id: string;
-    searchTerm?: string;
-    disabled?: boolean;
-    validationMessage?: string;
+    searchTerm?: string | undefined;
+    disabled?: boolean | undefined;
+    validationMessage?: string | undefined;
     children: any;
-    size: string;
-};
-declare const SearchField: React.ForwardRefExoticComponent<SeachFieldProps & React.RefAttributes<HTMLDivElement>>;
+    size?: Size.Small | Size.Medium | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
 export default SearchField;

package/dist/InputFields/components/SearchField.js

@@ -1,35 +1,42 @@
+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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 import * as React from 'react';
-import styled, { css } from 'styled-components';
-import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';
-import { activeValidationMessageState } from '../styling';
+import styled from 'styled-components';
+import { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';
 import { ComponentMStyling, ComponentSStyling } from '../../styles';
-import { Z_INDEXES } from '../../styles/z-indexes';
 import { jsx as _jsx } from "react/jsx-runtime";
-var DisabledState = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  pointer-events: none;\n  background-color: transparent !important;\n  box-shadow: none !important;\n"])), COLORS.neutral_100);
-export var StyledSearchField = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0px 0px 0px 1px ", ";\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 0px 0px 0px 2px ", ";\n    border-color: transparent;\n  }\n\n  &.focus-visible-within{\n    outline: none;\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    z-index: ", ";\n  }\n  \n  &:focus-within {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    border-color: transparent;\n  }\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n\n  div {\n    color: ", ";\n    background-color: transparent;\n  }\n\n  ", "\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_700, Z_INDEXES.focus, COLORS.primary_800, COLORS.neutral_100, COLORS.neutral_600, function (props) {
-  return props.disabled ? DisabledState : '';
-}, function (props) {
-  return props.activeValidationMessage ? activeValidationMessageState : '';
-});
+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  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"])), 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;
-  return /*#__PURE__*/_jsx(StyledSearchField, {
-    id: "".concat(id, "_main"),
+      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,
-    className: (searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : ''),
-    disabled: disabled,
-    activeValidationMessage: validationMessage !== undefined && validationMessage !== '',
-    children: children
+    children: /*#__PURE__*/_jsx(StyledSearchField, _objectSpread(_objectSpread({
+      id: "".concat(id, "_main"),
+      "data-testid": "".concat(id, "_main"),
+      className: cls
+    }, rest), {}, {
+      children: children
+    }))
   });
 });
 SearchField.propTypes = {
@@ -37,8 +44,7 @@ SearchField.propTypes = {
   searchTerm: _pt.string,
   disabled: _pt.bool,
   validationMessage: _pt.string,
-  children: _pt.any.isRequired,
-  size: _pt.string.isRequired
+  children: _pt.any.isRequired
 };
 export default SearchField;
 //# sourceMappingURL=SearchField.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/components/SearchField.tsx"],"names":["React","styled","css","BREAKPOINTS","COLORS","ComponentTextStyle","activeValidationMessageState","ComponentMStyling","ComponentSStyling","Z_INDEXES","DisabledState","neutral_100","StyledSearchField","div","neutral_400","white","Regular","black","Italic","neutral_500","MEDIUM","primary_700","focus","primary_800","neutral_600","props","disabled","activeValidationMessage","SearchField","forwardRef","ref","id","searchTerm","validationMessage","children","size","concat","undefined"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,IAAgBC,GAAhB,QAA0B,mBAA1B;AACA,SAAQC,WAAR,EAAqBC,MAArB,EAA6BC,kBAA7B,QAAsD,oBAAtD;AACA,SAAQC,4BAAR,QAA2C,YAA3C;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,QAAmD,cAAnD;AACA,SAAQC,SAAR,QAAwB,wBAAxB;;AAEA,IAAMC,aAAa,GAAGR,GAAH,yMACGE,MAAM,CAACO,WADV,CAAnB;AAOA,OAAO,IAAMC,iBAAiB,GAAGX,MAAM,CAACY,GAAV,oyCAGQT,MAAM,CAACU,WAHf,EAURV,MAAM,CAACW,KAVC,EAY1BP,iBAAiB,CAACH,kBAAkB,CAACW,OAApB,EAA6BZ,MAAM,CAACa,KAApC,CAZS,EAkBxBT,iBAAiB,CAACH,kBAAkB,CAACa,MAApB,EAA4Bd,MAAM,CAACe,WAAnC,CAlBO,EAqB1BhB,WAAW,CAACiB,MArBc,EAsBxBb,iBAAiB,CAACF,kBAAkB,CAACW,OAApB,EAA6BZ,MAAM,CAACa,KAApC,CAtBO,EA4BtBV,iBAAiB,CAACF,kBAAkB,CAACa,MAApB,EAA4Bd,MAAM,CAACe,WAAnC,CA5BK,EAiCxBX,iBAAiB,CAACH,kBAAkB,CAACW,OAApB,EAA6BZ,MAAM,CAACa,KAApC,CAjCO,EAsCtBT,iBAAiB,CAACH,kBAAkB,CAACa,MAApB,EAA4Bd,MAAM,CAACe,WAAnC,CAtCK,EA2CxBZ,iBAAiB,CAACF,kBAAkB,CAACW,OAApB,EAA6BZ,MAAM,CAACa,KAApC,CA3CO,EA+CtBV,iBAAiB,CAACF,kBAAkB,CAACa,MAApB,EAA4Bd,MAAM,CAACe,WAAnC,CA/CK,EAoDUf,MAAM,CAACiB,WApDjB,EA2DfZ,SAAS,CAACa,KA3DK,EA+DUlB,MAAM,CAACmB,WA/DjB,EAoENnB,MAAM,CAACO,WApED,EA0EjBP,MAAM,CAACoB,WA1EU,EA8E1B,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,QAAN,GAAiBhB,aAAjB,GAAiC,EAA7C;AAAA,CA9E0B,EA+E1B,UAACe,KAAD;AAAA,SAAYA,KAAK,CAACE,uBAAN,GAAgCrB,4BAAhC,GAA+D,EAA3E;AAAA,CA/E0B,CAAvB;AA2FP,IAAMsB,WAAW,gBAAG5B,KAAK,CAAC6B,UAAN,CAAkD,gBAOMC,GAPN,EAOc;AAAA,MANTC,EAMS,QANTA,EAMS;AAAA,MALTC,UAKS,QALTA,UAKS;AAAA,MAJTN,QAIS,QAJTA,QAIS;AAAA,MAHTO,iBAGS,QAHTA,iBAGS;AAAA,MAFTC,QAES,QAFTA,QAES;AAAA,MADTC,IACS,QADTA,IACS;AAClF,sBACE,KAAC,iBAAD;AACE,IAAA,EAAE,YAAKJ,EAAL,UADJ;AAEE,IAAA,GAAG,EAAED,GAFP;AAGE,IAAA,SAAS,EAAE,CAACE,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EAAvC,EAA2CI,MAA3C,CAAkDD,IAAI,GAAGA,IAAH,GAAU,EAAhE,CAHb;AAIE,IAAA,QAAQ,EAAET,QAJZ;AAKE,IAAA,uBAAuB,EAAEO,iBAAiB,KAAKI,SAAtB,IAAmCJ,iBAAiB,KAAK,EALpF;AAAA,cAMGC;AANH,IADF;AAUD,CAlBmB,CAApB;;AAREH,EAAAA,E;AACAC,EAAAA,U;AACAN,EAAAA,Q;AACAO,EAAAA,iB;AACAC,EAAAA,Q;AACAC,EAAAA,I;;AAuBF,eAAeP,WAAf","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles/index';\nimport {activeValidationMessageState} from '../styling';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles';\nimport {Z_INDEXES} from '../../styles/z-indexes';\n\nconst DisabledState = css`\n  border: 1px solid ${COLORS.neutral_100};\n  pointer-events: none;\n  background-color: transparent !important;\n  box-shadow: none !important;\n`;\n\nexport const StyledSearchField = styled.div<{ disabled?: boolean; activeValidationMessage?: boolean; }>`\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\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: ${COLORS.white};\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    border-color: transparent;\n  }\n\n  &.focus-visible-within{\n    outline: none;\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    z-index: ${Z_INDEXES.focus};\n  }\n  \n  &:focus-within {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    border-color: transparent;\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n\n  div {\n    color: ${COLORS.neutral_600};\n    background-color: transparent;\n  }\n\n  ${(props) => (props.disabled ? DisabledState : '')}\n  ${(props) => (props.activeValidationMessage ? activeValidationMessageState : '')}\n`;\n\ntype SeachFieldProps = {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  size: string;\n};\n\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({\n                                                                           id,\n                                                                           searchTerm,\n                                                                           disabled,\n                                                                           validationMessage,\n                                                                           children,\n                                                                           size\n                                                                         }, ref) => {\n  return (\n    <StyledSearchField\n      id={`${id}_main`}\n      ref={ref}\n      className={(searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '')}\n      disabled={disabled}\n      activeValidationMessage={validationMessage !== undefined && validationMessage !== ''}>\n      {children}\n    </StyledSearchField>\n  );\n});\n\nexport default SearchField;\n"],"file":"SearchField.js"}
+{"version":3,"sources":["../../../src/InputFields/components/SearchField.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","SearchFieldWrapper","div","StyledSearchField","neutral_400","white","Regular","black","Italic","neutral_500","MEDIUM","primary_800","neutral_600","critical_400","neutral_100","SearchField","forwardRef","ref","id","searchTerm","disabled","validationMessage","children","size","className","rest","cls","concat"],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAyC,mBAAzC;AACA,SAAQC,WAAR,EAAqBC,MAArB,EAA6BC,kBAA7B,EAAiDC,WAAjD,QAAmE,oBAAnE;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,QAAmD,cAAnD;;AAKA,OAAO,IAAMC,kBAAkB,GAAGP,MAAM,CAACQ,GAAV,mHAEzBJ,WAFyB,CAAxB;AAMP,OAAO,IAAMK,iBAAiB,GAAGT,MAAM,CAACQ,GAAV,gnCAGEN,MAAM,CAACQ,WAHT,EAURR,MAAM,CAACS,KAVC,EAY1BL,iBAAiB,CAACH,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAZS,EAkBxBP,iBAAiB,CAACH,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CAlBO,EAqB1Bd,WAAW,CAACe,MArBc,EAsBxBX,iBAAiB,CAACF,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAtBO,EA4BtBR,iBAAiB,CAACF,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CA5BK,EAiCxBT,iBAAiB,CAACH,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CAjCO,EAsCtBP,iBAAiB,CAACH,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CAtCK,EA2CxBV,iBAAiB,CAACF,kBAAkB,CAACS,OAApB,EAA6BV,MAAM,CAACW,KAApC,CA3CO,EA+CtBR,iBAAiB,CAACF,kBAAkB,CAACW,MAApB,EAA4BZ,MAAM,CAACa,WAAnC,CA/CK,EAoDIb,MAAM,CAACe,WApDX,EAwDIf,MAAM,CAACe,WAxDX,EA4DjBf,MAAM,CAACgB,WA5DU,EAiEIhB,MAAM,CAACiB,YAjEX,EAqEIjB,MAAM,CAACkB,WArEX,CAAvB;AAqFP,IAAMC,WAAW,gBAAGtB,KAAK,CAACuB,UAAN,CAAkD,gBASIC,GATJ,EASY;AAAA,MARTC,EAQS,QARTA,EAQS;AAAA,MAPTC,UAOS,QAPTA,UAOS;AAAA,MANTC,QAMS,QANTA,QAMS;AAAA,MALTC,iBAKS,QALTA,iBAKS;AAAA,MAJTC,QAIS,QAJTA,QAIS;AAAA,MAHTC,IAGS,QAHTA,IAGS;AAAA,MAFTC,SAES,QAFTA,SAES;AAAA,MADNC,IACM;;AAEhF,MAAMC,GAAG,GACP,CAACN,QAAQ,GAAG,WAAH,GAAiB,EAA1B,EACGO,MADH,CACUR,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EADhD,EAEGQ,MAFH,CAEUJ,IAAI,aAAMA,IAAN,SAAgB,EAF9B,EAGGI,MAHH,CAGUN,iBAAiB,GAAG,WAAH,GAAiB,EAH5C,EAIGM,MAJH,WAIaH,SAJb,aAIaA,SAJb,cAIaA,SAJb,GAI0B,EAJ1B,OADF;AAOA,sBACE,KAAC,kBAAD;AAAoB,IAAA,GAAG,EAAEP,GAAzB;AAAA,2BACE,KAAC,iBAAD;AACE,MAAA,EAAE,YAAKC,EAAL,UADJ;AAEE,+BAAgBA,EAAhB,UAFF;AAGE,MAAA,SAAS,EAAEQ;AAHb,OAIMD,IAJN;AAAA,gBAKGH;AALH;AADF,IADF;AAWD,CA7BmB,CAApB;;AAREJ,EAAAA,E;AACAC,EAAAA,U;AACAC,EAAAA,Q;AACAC,EAAAA,iB;AACAC,EAAAA,Q;;AAmCF,eAAeP,WAAf","sourcesContent":["import * as React from 'react';\nimport styled, {css, CSSProperties} from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../../styles/index';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles';\nimport {Z_INDEXES} from '../../styles/z-indexes';\nimport {Size} from '../../types';\nimport {activeErrorMessageState} from '../styling';\n\nexport const SearchFieldWrapper = styled.div`\n  &.focus-visible-within {\n    ${focusStyles}\n  }\n`;\n\nexport const StyledSearchField = styled.div<{ activeValidationMessage?: boolean; }>`\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\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: ${COLORS.white};\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  div {\n    color: ${COLORS.neutral_600};\n    background-color: transparent;\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n\n`;\n\ntype SeachFieldProps = React.HTMLAttributes<HTMLDivElement> & {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  size?: Size.Small | Size.Medium;\n};\n\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({\n                                                                         id,\n                                                                         searchTerm,\n                                                                         disabled,\n                                                                         validationMessage,\n                                                                         children,\n                                                                         size,\n                                                                         className,\n                                                                         ...rest\n                                                                       }, ref) => {\n\n  const cls =\n    (disabled ? 'disabled ' : '')\n      .concat(searchTerm !== '' ? 'searchactive ' : '')\n      .concat(size ? `${size} ` : '')\n      .concat(validationMessage ? ' invalid ' : '')\n      .concat(`${className ?? ''} `);\n\n  return (\n    <SearchFieldWrapper ref={ref}>\n      <StyledSearchField\n        id={`${id}_main`}\n        data-testid={`${id}_main`}\n        className={cls}\n        {...rest}>\n        {children}\n      </StyledSearchField>\n    </SearchFieldWrapper>\n  );\n});\n\nexport default SearchField;\n"],"file":"SearchField.js"}

package/dist/InputFields/index.cjs

@@ -23,6 +23,12 @@ Object.defineProperty(exports, "InputLabel", {
     return _Label.default;
   }
 });
+Object.defineProperty(exports, "NumberField", {
+  enumerable: true,
+  get: function get() {
+    return _NumberField.default;
+  }
+});
 Object.defineProperty(exports, "PasswordField", {
   enumerable: true,
   get: function get() {
@@ -77,4 +83,6 @@ var _DatepickerField = _interopRequireDefault(require("./DatepickerField"));
 var _Textarea = _interopRequireDefault(require("./Textarea"));
 
 var _QuickSearch = _interopRequireDefault(require("./QuickSearch"));
+
+var _NumberField = _interopRequireDefault(require("./NumberField"));
 //# sourceMappingURL=index.cjs.map

package/dist/InputFields/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\n\nexport { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch };\n"],"file":"index.cjs"}
+{"version":3,"sources":["../../src/InputFields/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\nimport NumberField from './NumberField';\n\nexport { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };\n"],"file":"index.cjs"}

package/dist/InputFields/index.d.ts

@@ -7,4 +7,5 @@ import InputLabel from './Label';
 import DatepickerField from './DatepickerField';
 import Textarea from './Textarea';
 import QuickSearch from './QuickSearch';
-export { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch };
+import NumberField from './NumberField';
+export { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };

package/dist/InputFields/index.js

@@ -7,5 +7,6 @@ import InputLabel from './Label';
 import DatepickerField from './DatepickerField';
 import Textarea from './Textarea';
 import QuickSearch from './QuickSearch';
-export { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch };
+import NumberField from './NumberField';
+export { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };
 //# sourceMappingURL=index.js.map

package/dist/InputFields/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/index.ts"],"names":["TextField","PasswordField","Checkbox","RadioButton","SearchBar","InputLabel","DatepickerField","Textarea","QuickSearch"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,aAAtB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,UAAP,MAAuB,SAAvB;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AAEA,SAASR,SAAT,EAAoBC,aAApB,EAAmCC,QAAnC,EAA6CC,WAA7C,EAA0DC,SAA1D,EAAqEC,UAArE,EAAiFC,eAAjF,EAAkGC,QAAlG,EAA4GC,WAA5G","sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\n\nexport { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch };\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/InputFields/index.ts"],"names":["TextField","PasswordField","Checkbox","RadioButton","SearchBar","InputLabel","DatepickerField","Textarea","QuickSearch","NumberField"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,aAAtB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,UAAP,MAAuB,SAAvB;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AAEA,SAAST,SAAT,EAAoBC,aAApB,EAAmCC,QAAnC,EAA6CC,WAA7C,EAA0DC,SAA1D,EAAqEC,UAArE,EAAiFC,eAAjF,EAAkGC,QAAlG,EAA4GC,WAA5G,EAAyHC,WAAzH","sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\nimport NumberField from './NumberField';\n\nexport { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };\n"],"file":"index.js"}

package/dist/InputFields/styling.cjs

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.activeValidationMessageState = exports.WarningMessage = exports.Warning = exports.ValidationStyling = exports.StyledIcon = exports.SearchIconWrapper = exports.RequiredStar = exports.InputWrapper = exports.InputFieldStyling = exports.ErrorMessage = exports.AutofilledMessage = void 0;
+exports.activeErrorMessageState = exports.Warning = exports.ValidationStyling = exports.StyledIcon = exports.SearchIconWrapper = exports.RequiredStar = exports.InputWrapper = exports.InputFieldStyling = exports.ErrorMessage = exports.AutofilledMessage = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -17,60 +17,50 @@ var _styles = require("../styles");
 
 var _typography = require("../styles/typography");
 
-var _zIndexes = require("../styles/z-indexes");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
 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 InputWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  ", ";\n  ", "\n"])), function (props) {
-  return props.locked || props.disabled ? 'cursor: not-allowed;' : '';
+  return props.readOnly || props.disabled ? 'cursor: not-allowed;' : '';
 }, function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 });
 
 exports.InputWrapper = InputWrapper;
-var lockedState = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", " !important;\n  color: ", " !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_600);
-var activeValidationMessageState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.COLORS.warning_400, _styles.COLORS.warning_400, _styles.COLORS.warning_400);
-exports.activeValidationMessageState = activeValidationMessageState;
-var activeErrorMessageState = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.COLORS.critical_400, _styles.COLORS.critical_400, _styles.COLORS.critical_400);
-var activeCorrectInput = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.COLORS.correct_500, _styles.COLORS.correct_500, _styles.COLORS.correct_500);
+var readOnlyState = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  box-shadow: inset 0 0 0 1px ", " !important;\n  color: ", " !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_600);
+var activeErrorMessageState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: inset 0 0 0 2px ", ";\n"])), _styles.COLORS.critical_400);
+exports.activeErrorMessageState = activeErrorMessageState;
 
-var InputFieldStyling = _styledComponents.default.input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ", "\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  outline: none;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ", " !important;\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ", " !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n  \n  &.focus-visible{\n    outline: none;\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    z-index: ", ";\n  }\n\n  &.error {\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 2px;\n    border-color: #e97116;\n    padding: 0 15px !important;\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.error {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n  \n"])), function (props) {
+var InputFieldStyling = _styledComponents.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ", "\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ", " !important;\n\n  ", "\n\n  &:read-only:not(:disabled) {\n    ", "\n  }\n  \n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ", " !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n  \n  &.focus-visible{\n    ", "\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n  \n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.invalid {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n  \n"])), function (props) {
   return props.withoutBorder ? "-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      " : "-webkit-box-shadow: inset 0px 0px 0px 1px ".concat(_styles.COLORS.neutral_400, ";\n      -moz-box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.neutral_400, ";\n      box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.neutral_400, ";");
 }, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), _styles.COLORS.black, function (props) {
-  return props.locked ? lockedState : '';
-}, function (props) {
-  return props.activeValidationMessage ? activeValidationMessageState : '';
-}, function (props) {
   return props.activeErrorMessage ? activeErrorMessageState : '';
 }, function (props) {
-  return props.correctInput ? activeCorrectInput : '';
-}, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.primary_800, _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_700, _styles.COLORS.primary_800);
+  return props.suppressReadOnlyStyles ? '' : readOnlyState;
+}, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.primary_800, _styles.focusStyles, _styles.COLORS.critical_400, _styles.COLORS.correct_500, _styles.COLORS.primary_700, _styles.COLORS.primary_800);
 
 exports.InputFieldStyling = InputFieldStyling;
-var ValidationStyling = (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  &.error-msg {\n    ", "\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ", "\n    font-weight: 700;\n    line-height: 15px;\n  }\n"])), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, '#e76468'));
+var ValidationStyling = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  &.error-msg {\n    ", "\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ", "\n    font-weight: 700;\n    line-height: 15px;\n  }\n"])), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, '#e76468'));
 exports.ValidationStyling = ValidationStyling;
 
-var RequiredStar = _styledComponents.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 28px;\n  line-height: 12px;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n"])), _styles.COLORS.critical_500);
+var RequiredStar = _styledComponents.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 28px;\n  line-height: 12px;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n"])), _styles.COLORS.critical_500);
 
 exports.RequiredStar = RequiredStar;
 
-var Warning = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 12px;\n  line-height: 140%;\n\n  ", " {\n    font-size: 14px;\n  }\n\n  &.small {\n    font-size: 12px;\n  }\n  &.medium {\n    font-size: 14px;\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
+var Warning = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 12px;\n  line-height: 140%;\n\n  ", " {\n    font-size: 14px;\n  }\n\n  &.small {\n    font-size: 12px;\n  }\n  &.medium {\n    font-size: 14px;\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
 
 exports.Warning = Warning;
-var WarningMessage = (0, _styledComponents.default)(Warning)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.warning_500);
-exports.WarningMessage = WarningMessage;
-var ErrorMessage = (0, _styledComponents.default)(Warning)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.critical_500);
+var ErrorMessage = (0, _styledComponents.default)(Warning)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.critical_500);
 exports.ErrorMessage = ErrorMessage;
-var AutofilledMessage = (0, _styledComponents.default)(Warning)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.neutral_600);
+var AutofilledMessage = (0, _styledComponents.default)(Warning)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.neutral_600);
 exports.AutofilledMessage = AutofilledMessage;
 
-var StyledIcon = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 50%;\n"])));
+var StyledIcon = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 50%;\n"])));
 
 exports.StyledIcon = StyledIcon;
-var SearchIconWrapper = (0, _styledComponents.default)(StyledIcon)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  border-radius: 50%;\n"])));
+var SearchIconWrapper = (0, _styledComponents.default)(StyledIcon)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  border-radius: 50%;\n"])));
 exports.SearchIconWrapper = SearchIconWrapper;
 //# sourceMappingURL=styling.cjs.map