@laerdal/life-react-components 2.0.1-dev.9.full → 2.1.0

package/dist/InputFields/components/SearchBarInput.cjs

@@ -1,69 +1,51 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Search = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _index = require("../../styles/index");
-
 var _styles = require("../../styles");
-
 var _common = require("../../common");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _templateObject;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var Search = _styledComponents.default.input.attrs(function () {
   return {
     type: 'search'
   };
 })(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  appearance: none;\n  width: calc(100% - 96px);\n\n  /* 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"])), (0, _styles.ComponentSStyling)(_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_600), _index.BREAKPOINTS.MEDIUM, (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_600), (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_600), (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_600));
-
 exports.Search = Search;
 var SearchBarInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var id = props.id,
-      searchTerm = props.searchTerm,
-      setSearchTerm = props.setSearchTerm,
-      enterSearch = props.enterSearch,
-      placeholder = props.placeholder,
-      disabled = props.disabled,
-      onKeyDown = props.onKeyDown,
-      size = props.size,
-      _onBlur = props.onBlur,
-      onClick = props.onClick;
+    searchTerm = props.searchTerm,
+    setSearchTerm = props.setSearchTerm,
+    enterSearch = props.enterSearch,
+    placeholder = props.placeholder,
+    disabled = props.disabled,
+    onKeyDown = props.onKeyDown,
+    size = props.size,
+    _onBlur = props.onBlur,
+    onClick = props.onClick;
   var elementRef = (0, _common.useFocusVisibleRef)(props.focusParentRefs || []);
   React.useImperativeHandle(ref, function () {
     return elementRef.current;
   }, [elementRef]);
-
   var isPressingEnter = function isPressingEnter(e) {
     if (e.key === 'Enter') {
       e.preventDefault();
       e.stopPropagation();
       return true;
     }
-
     return false;
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Search, {
     placeholder: disabled ? '' : placeholder,
     ref: elementRef,

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBarInput.cjs","names":["Search","styled","input","attrs","type","ComponentSStyling","ComponentTextStyle","Italic","COLORS","neutral_500","Regular","black","neutral_600","BREAKPOINTS","MEDIUM","ComponentMStyling","SearchBarInput","React","forwardRef","props","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","useFocusVisibleRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","e","key","preventDefault","stopPropagation","target","value"],"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"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: 48px;\n  outline: none;\n\n  ${ComponentSStyling(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    margin-left: 44px;\n\n    ::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    margin-left: 48px;\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    \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  onClick?: ()=>void;\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\n\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\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      onClick={onClick}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AAEO,IAAMA,MAAM,GAAGC,yBAAA,CAAOC,KAAP,CAAaC,KAAb,CAAmB;EAAA,OAAO;IAAEC,IAAI,EAAE;EAAR,CAAP;AAAA,CAAnB,CAAH,++BA0Bb,IAAAC,yBAAA,EAAkBC,yBAAA,CAAmBC,MAArC,EAA6CC,aAAA,CAAOC,WAApD,CA1Ba,EAkCf,IAAAJ,yBAAA,EAAkBC,yBAAA,CAAmBI,OAArC,EAA8CF,aAAA,CAAOG,KAArD,CAlCe,EAoCb,IAAAN,yBAAA,EAAkBC,yBAAA,CAAmBC,MAArC,EAA6CC,aAAA,CAAOI,WAApD,CApCa,EAuCfC,kBAAA,CAAYC,MAvCG,EAyCX,IAAAC,yBAAA,EAAkBT,yBAAA,CAAmBC,MAArC,EAA6CC,aAAA,CAAOI,WAApD,CAzCW,EAiDX,IAAAP,yBAAA,EAAkBC,yBAAA,CAAmBC,MAArC,EAA6CC,aAAA,CAAOI,WAApD,CAjDW,EAuDb,IAAAG,yBAAA,EAAkBT,yBAAA,CAAmBI,OAArC,EAA8CF,aAAA,CAAOG,KAArD,CAvDa,EA0DX,IAAAI,yBAAA,EAAkBT,yBAAA,CAAmBC,MAArC,EAA6CC,aAAA,CAAOI,WAApD,CA1DW,CAAZ;;;AAkFP,IAAMI,cAAc,gBAAGC,KAAK,CAACC,UAAN,CAAwD,UAACC,KAAD,EAA6BC,GAA7B,EAAqC;EAClH,IAAQC,EAAR,GAAgHF,KAAhH,CAAQE,EAAR;EAAA,IAAYC,UAAZ,GAAgHH,KAAhH,CAAYG,UAAZ;EAAA,IAAwBC,aAAxB,GAAgHJ,KAAhH,CAAwBI,aAAxB;EAAA,IAAuCC,WAAvC,GAAgHL,KAAhH,CAAuCK,WAAvC;EAAA,IAAoDC,WAApD,GAAgHN,KAAhH,CAAoDM,WAApD;EAAA,IAAiEC,QAAjE,GAAgHP,KAAhH,CAAiEO,QAAjE;EAAA,IAA2EC,SAA3E,GAAgHR,KAAhH,CAA2EQ,SAA3E;EAAA,IAAsFC,IAAtF,GAAgHT,KAAhH,CAAsFS,IAAtF;EAAA,IAA4FC,OAA5F,GAAgHV,KAAhH,CAA4FU,MAA5F;EAAA,IAAoGC,OAApG,GAAgHX,KAAhH,CAAoGW,OAApG;EAEA,IAAMC,UAAU,GAAG,IAAAC,0BAAA,EAAmBb,KAAK,CAACc,eAAN,IAAyB,EAA5C,CAAnB;EAEAhB,KAAK,CAACiB,mBAAN,CAA0Bd,GAA1B,EAA+B;IAAA,OAAMW,UAAU,CAACI,OAAjB;EAAA,CAA/B,EAAyD,CAACJ,UAAD,CAAzD;;EAEA,IAAMK,eAAe,GAAG,SAAlBA,eAAkB,CAACC,CAAD,EAAY;IAClC,IAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;MACrBD,CAAC,CAACE,cAAF;MACAF,CAAC,CAACG,eAAF;MACA,OAAO,IAAP;IACD;;IACD,OAAO,KAAP;EACD,CAPD;;EASA,oBACE,qBAAC,MAAD;IACE,WAAW,EAAEd,QAAQ,GAAG,EAAH,GAAQD,WAD/B;IAEE,GAAG,EAAEM,UAFP;IAGE,EAAE,EAAEV,EAHN;IAIE,eAAaA,EAJf;IAKE,SAAS,EAAEO,IAAI,GAAGA,IAAH,GAAU,EAL3B;IAME,QAAQ,EAAE,CANZ;IAOE,QAAQ,EAAEF,QAPZ;IAQE,QAAQ,EAAE,kBAACW,CAAD;MAAA,OAAYd,aAAa,CAACc,CAAC,CAACI,MAAF,CAASC,KAAV,CAAzB;IAAA,CARZ;IASE,KAAK,EAAEpB,UATT;IAUE,MAAM,EAAE,gBAACe,CAAD;MAAA,OAAOR,OAAM,IAAIA,OAAM,CAACQ,CAAD,CAAvB;IAAA,CAVV;IAWE,SAAS,EAAEV,SAXb;IAYE,UAAU,EAAE,oBAACU,CAAD;MAAA,OAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBb,WAAW,CAACa,CAAD,CAAhC,GAAsC,IAAnD;IAAA,CAZd;IAaE,OAAO,EAAEP;EAbX,EADF;AAiBD,CAjCsB,CAAvB;;EAbET,E;EACAC,U;EACAC,a;EACAC,W;EACAC,W;EACAC,Q;EACAC,S;EAEAE,M;EACAI,e;EACAH,O;;eAsCad,c"}
+{"version":3,"file":"SearchBarInput.cjs","names":["Search","styled","input","attrs","type","ComponentSStyling","ComponentTextStyle","Italic","COLORS","neutral_500","Regular","black","neutral_600","BREAKPOINTS","MEDIUM","ComponentMStyling","SearchBarInput","React","forwardRef","props","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","useFocusVisibleRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","e","key","preventDefault","stopPropagation","target","value"],"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"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: 48px;\n  outline: none;\n\n  ${ComponentSStyling(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    margin-left: 44px;\n\n    ::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    margin-left: 48px;\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    \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  onClick?: ()=>void;\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\n\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\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      onClick={onClick}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"mappings":"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"}

package/dist/InputFields/components/SearchBarInput.js

@@ -1,8 +1,6 @@
 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';
@@ -16,30 +14,27 @@ export var Search = styled.input.attrs(function () {
 })(_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;
+    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,

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBarInput.js","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","onClick","elementRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","e","key","preventDefault","stopPropagation","target","value"],"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"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: 48px;\n  outline: none;\n\n  ${ComponentSStyling(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    margin-left: 44px;\n\n    ::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    margin-left: 48px;\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    \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  onClick?: ()=>void;\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\n\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\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      onClick={onClick}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"mappings":"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"}
+{"version":3,"file":"SearchBarInput.js","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","onClick","elementRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","e","key","preventDefault","stopPropagation","target","value"],"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"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: 48px;\n  outline: none;\n\n  ${ComponentSStyling(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    margin-left: 44px;\n\n    ::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    margin-left: 48px;\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    \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  onClick?: ()=>void;\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\n\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\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      onClick={onClick}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"mappings":"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"}

package/dist/InputFields/components/SearchField.cjs

@@ -1,60 +1,39 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.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"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _index = require("../../styles/index");
-
 var _styles = require("../../styles");
-
 var _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; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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"])), _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) {
   var id = _ref.id,
-      searchTerm = _ref.searchTerm,
-      disabled = _ref.disabled,
-      validationMessage = _ref.validationMessage,
-      children = _ref.children,
-      size = _ref.size,
-      className = _ref.className,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    searchTerm = _ref.searchTerm,
+    disabled = _ref.disabled,
+    validationMessage = _ref.validationMessage,
+    children = _ref.children,
+    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,

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

@@ -1 +1 @@
-{"version":3,"file":"SearchField.cjs","names":["SearchFieldWrapper","styled","div","focusStyles","StyledSearchField","COLORS","neutral_400","white","ComponentSStyling","ComponentTextStyle","Regular","black","Italic","neutral_500","BREAKPOINTS","MEDIUM","ComponentMStyling","primary_800","neutral_600","critical_400","neutral_100","SearchField","React","forwardRef","ref","id","searchTerm","disabled","validationMessage","children","size","className","rest","cls","concat"],"sources":["../../../src/InputFields/components/SearchField.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { Size } from '../../types';\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\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>(({ id, searchTerm, disabled, validationMessage, children, size, className, ...rest }, ref) => {\n  const cls = (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 id={`${id}_main`} data-testid={`${id}_main`} className={cls} {...rest}>\n        {children}\n      </StyledSearchField>\n    </SearchFieldWrapper>\n  );\n});\n\nexport default SearchField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAGO,IAAMA,kBAAkB,GAAGC,yBAAA,CAAOC,GAAV,iIAEzBC,kBAFyB,CAAxB;;;;AAMA,IAAMC,iBAAiB,GAAGH,yBAAA,CAAOC,GAAV,4nCAGEG,aAAA,CAAOC,WAHT,EAURD,aAAA,CAAOE,KAVC,EAY1B,IAAAC,yBAAA,EAAkBC,yBAAA,CAAmBC,OAArC,EAA8CL,aAAA,CAAOM,KAArD,CAZ0B,EAkBxB,IAAAH,yBAAA,EAAkBC,yBAAA,CAAmBG,MAArC,EAA6CP,aAAA,CAAOQ,WAApD,CAlBwB,EAqB1BC,kBAAA,CAAYC,MArBc,EAsBxB,IAAAC,yBAAA,EAAkBP,yBAAA,CAAmBC,OAArC,EAA8CL,aAAA,CAAOM,KAArD,CAtBwB,EA4BtB,IAAAK,yBAAA,EAAkBP,yBAAA,CAAmBG,MAArC,EAA6CP,aAAA,CAAOQ,WAApD,CA5BsB,EAiCxB,IAAAL,yBAAA,EAAkBC,yBAAA,CAAmBC,OAArC,EAA8CL,aAAA,CAAOM,KAArD,CAjCwB,EAsCtB,IAAAH,yBAAA,EAAkBC,yBAAA,CAAmBG,MAArC,EAA6CP,aAAA,CAAOQ,WAApD,CAtCsB,EA2CxB,IAAAG,yBAAA,EAAkBP,yBAAA,CAAmBC,OAArC,EAA8CL,aAAA,CAAOM,KAArD,CA3CwB,EA+CtB,IAAAK,yBAAA,EAAkBP,yBAAA,CAAmBG,MAArC,EAA6CP,aAAA,CAAOQ,WAApD,CA/CsB,EAoDIR,aAAA,CAAOY,WApDX,EAwDIZ,aAAA,CAAOY,WAxDX,EA4DjBZ,aAAA,CAAOa,WA5DU,EAiEIb,aAAA,CAAOc,YAjEX,EAqEId,aAAA,CAAOe,WArEX,CAAvB;;;AAoFP,IAAMC,WAAW,gBAAGC,KAAK,CAACC,UAAN,CAAkD,gBAAsFC,GAAtF,EAA8F;EAAA,IAA3FC,EAA2F,QAA3FA,EAA2F;EAAA,IAAvFC,UAAuF,QAAvFA,UAAuF;EAAA,IAA3EC,QAA2E,QAA3EA,QAA2E;EAAA,IAAjEC,iBAAiE,QAAjEA,iBAAiE;EAAA,IAA9CC,QAA8C,QAA9CA,QAA8C;EAAA,IAApCC,IAAoC,QAApCA,IAAoC;EAAA,IAA9BC,SAA8B,QAA9BA,SAA8B;EAAA,IAAhBC,IAAgB;EAClK,IAAMC,GAAG,GAAG,CAACN,QAAQ,GAAG,WAAH,GAAiB,EAA1B,EACTO,MADS,CACFR,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EADpC,EAETQ,MAFS,CAEFJ,IAAI,aAAMA,IAAN,SAAgB,EAFlB,EAGTI,MAHS,CAGFN,iBAAiB,GAAG,WAAH,GAAiB,EAHhC,EAITM,MAJS,WAICH,SAJD,aAICA,SAJD,cAICA,SAJD,GAIc,EAJd,OAAZ;EAMA,oBACE,qBAAC,kBAAD;IAAoB,GAAG,EAAEP,GAAzB;IAAA,uBACE,qBAAC,iBAAD;MAAmB,EAAE,YAAKC,EAAL,UAArB;MAAqC,yBAAgBA,EAAhB,UAArC;MAAgE,SAAS,EAAEQ;IAA3E,GAAoFD,IAApF;MAAA,UACGH;IADH;EADF,EADF;AAOD,CAdmB,CAApB;;EAREJ,E;EACAC,U;EACAC,Q;EACAC,iB;EACAC,Q;;eAoBaR,W"}
+{"version":3,"file":"SearchField.cjs","names":["SearchFieldWrapper","styled","div","focusStyles","StyledSearchField","COLORS","neutral_400","white","ComponentSStyling","ComponentTextStyle","Regular","black","Italic","neutral_500","BREAKPOINTS","MEDIUM","ComponentMStyling","primary_800","neutral_600","critical_400","neutral_100","SearchField","React","forwardRef","ref","id","searchTerm","disabled","validationMessage","children","size","className","rest","cls","concat"],"sources":["../../../src/InputFields/components/SearchField.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { Size } from '../../types';\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\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>(({ id, searchTerm, disabled, validationMessage, children, size, className, ...rest }, ref) => {\n  const cls = (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 id={`${id}_main`} data-testid={`${id}_main`} className={cls} {...rest}>\n        {children}\n      </StyledSearchField>\n    </SearchFieldWrapper>\n  );\n});\n\nexport default SearchField;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AAAoE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAG7D,IAAMA,kBAAkB,GAAGC,yBAAM,CAACC,GAAG,iIAEtCC,kBAAW,CAEhB;AAAC;AAEK,IAAMC,iBAAiB,GAAGH,yBAAM,CAACC,GAAG,4nCAGXG,aAAM,CAACC,WAAW,EAO5BD,aAAM,CAACE,KAAK,EAE9B,IAAAC,yBAAiB,EAACC,yBAAkB,CAACC,OAAO,EAAEL,aAAM,CAACM,KAAK,CAAC,EAMzD,IAAAH,yBAAiB,EAACC,yBAAkB,CAACG,MAAM,EAAEP,aAAM,CAACQ,WAAW,CAAC,EAGlEC,kBAAW,CAACC,MAAM,EAChB,IAAAC,yBAAiB,EAACP,yBAAkB,CAACC,OAAO,EAAEL,aAAM,CAACM,KAAK,CAAC,EAMzD,IAAAK,yBAAiB,EAACP,yBAAkB,CAACG,MAAM,EAAEP,aAAM,CAACQ,WAAW,CAAC,EAKlE,IAAAL,yBAAiB,EAACC,yBAAkB,CAACC,OAAO,EAAEL,aAAM,CAACM,KAAK,CAAC,EAKzD,IAAAH,yBAAiB,EAACC,yBAAkB,CAACG,MAAM,EAAEP,aAAM,CAACQ,WAAW,CAAC,EAKlE,IAAAG,yBAAiB,EAACP,yBAAkB,CAACC,OAAO,EAAEL,aAAM,CAACM,KAAK,CAAC,EAIzD,IAAAK,yBAAiB,EAACP,yBAAkB,CAACG,MAAM,EAAEP,aAAM,CAACQ,WAAW,CAAC,EAKtCR,aAAM,CAACY,WAAW,EAIlBZ,aAAM,CAACY,WAAW,EAIvCZ,aAAM,CAACa,WAAW,EAKGb,aAAM,CAACc,YAAY,EAInBd,aAAM,CAACe,WAAW,CAInD;AAAC;AAWF,IAAMC,WAAW,gBAAGC,KAAK,CAACC,UAAU,CAAkC,gBAAsFC,GAAG,EAAK;EAAA,IAA3FC,EAAE,QAAFA,EAAE;IAAEC,UAAU,QAAVA,UAAU;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,iBAAiB,QAAjBA,iBAAiB;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EACtJ,IAAMC,GAAG,GAAG,CAACN,QAAQ,GAAG,WAAW,GAAG,EAAE,EACrCO,MAAM,CAACR,UAAU,KAAK,EAAE,GAAG,eAAe,GAAG,EAAE,CAAC,CAChDQ,MAAM,CAACJ,IAAI,aAAMA,IAAI,SAAM,EAAE,CAAC,CAC9BI,MAAM,CAACN,iBAAiB,GAAG,WAAW,GAAG,EAAE,CAAC,CAC5CM,MAAM,WAAIH,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,OAAI;EAEhC,oBACE,qBAAC,kBAAkB;IAAC,GAAG,EAAEP,GAAI;IAAA,uBAC3B,qBAAC,iBAAiB;MAAC,EAAE,YAAKC,EAAE,UAAQ;MAAC,yBAAgBA,EAAE,UAAQ;MAAC,SAAS,EAAEQ;IAAI,GAAKD,IAAI;MAAA,UACrFH;IAAQ;EACS,EACD;AAEzB,CAAC,CAAC;AAAC;EAtBDJ,EAAE;EACFC,UAAU;EACVC,QAAQ;EACRC,iBAAiB;EACjBC,QAAQ;AAAA;AAAA,eAoBKR,WAAW;AAAA"}

package/dist/InputFields/components/SearchField.js

@@ -3,13 +3,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import * as React from 'react';
 import styled from 'styled-components';
 import { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';
@@ -19,14 +15,13 @@ export var SearchFieldWrapper = styled.div(_templateObject || (_templateObject =
 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"])), 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);
-
+    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,

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

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","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"],"sources":["../../../src/InputFields/components/SearchField.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { Size } from '../../types';\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\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>(({ id, searchTerm, disabled, validationMessage, children, size, className, ...rest }, ref) => {\n  const cls = (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 id={`${id}_main`} data-testid={`${id}_main`} className={cls} {...rest}>\n        {children}\n      </StyledSearchField>\n    </SearchFieldWrapper>\n  );\n});\n\nexport default SearchField;\n"],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,WAAT,EAAsBC,MAAtB,EAA8BC,kBAA9B,EAAkDC,WAAlD,QAAqE,oBAArE;AACA,SAASC,iBAAT,EAA4BC,iBAA5B,QAAqD,cAArD;;AAGA,OAAO,IAAMC,kBAAkB,GAAGP,MAAM,CAACQ,GAAV,mHAEzBJ,WAFyB,CAAxB;AAMP,OAAO,IAAMK,iBAAiB,GAAGT,MAAM,CAACQ,GAAV,8mCAGEN,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;AAoFP,IAAMC,WAAW,gBAAGtB,KAAK,CAACuB,UAAN,CAAkD,gBAAsFC,GAAtF,EAA8F;EAAA,IAA3FC,EAA2F,QAA3FA,EAA2F;EAAA,IAAvFC,UAAuF,QAAvFA,UAAuF;EAAA,IAA3EC,QAA2E,QAA3EA,QAA2E;EAAA,IAAjEC,iBAAiE,QAAjEA,iBAAiE;EAAA,IAA9CC,QAA8C,QAA9CA,QAA8C;EAAA,IAApCC,IAAoC,QAApCA,IAAoC;EAAA,IAA9BC,SAA8B,QAA9BA,SAA8B;EAAA,IAAhBC,IAAgB;;EAClK,IAAMC,GAAG,GAAG,CAACN,QAAQ,GAAG,WAAH,GAAiB,EAA1B,EACTO,MADS,CACFR,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EADpC,EAETQ,MAFS,CAEFJ,IAAI,aAAMA,IAAN,SAAgB,EAFlB,EAGTI,MAHS,CAGFN,iBAAiB,GAAG,WAAH,GAAiB,EAHhC,EAITM,MAJS,WAICH,SAJD,aAICA,SAJD,cAICA,SAJD,GAIc,EAJd,OAAZ;EAMA,oBACE,KAAC,kBAAD;IAAoB,GAAG,EAAEP,GAAzB;IAAA,uBACE,KAAC,iBAAD;MAAmB,EAAE,YAAKC,EAAL,UAArB;MAAqC,yBAAgBA,EAAhB,UAArC;MAAgE,SAAS,EAAEQ;IAA3E,GAAoFD,IAApF;MAAA,UACGH;IADH;EADF,EADF;AAOD,CAdmB,CAApB;;EAREJ,E;EACAC,U;EACAC,Q;EACAC,iB;EACAC,Q;;AAoBF,eAAeP,WAAf"}
+{"version":3,"file":"SearchField.js","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"],"sources":["../../../src/InputFields/components/SearchField.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\nimport { Size } from '../../types';\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\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>(({ id, searchTerm, disabled, validationMessage, children, size, className, ...rest }, ref) => {\n  const cls = (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 id={`${id}_main`} data-testid={`${id}_main`} className={cls} {...rest}>\n        {children}\n      </StyledSearchField>\n    </SearchFieldWrapper>\n  );\n});\n\nexport default SearchField;\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,WAAW,EAAEC,MAAM,EAAEC,kBAAkB,EAAEC,WAAW,QAAQ,oBAAoB;AACzF,SAASC,iBAAiB,EAAEC,iBAAiB,QAAQ,cAAc;AAAC;AAGpE,OAAO,IAAMC,kBAAkB,GAAGP,MAAM,CAACQ,GAAG,mHAEtCJ,WAAW,CAEhB;AAED,OAAO,IAAMK,iBAAiB,GAAGT,MAAM,CAACQ,GAAG,8mCAGXN,MAAM,CAACQ,WAAW,EAO5BR,MAAM,CAACS,KAAK,EAE9BL,iBAAiB,CAACH,kBAAkB,CAACS,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAMzDP,iBAAiB,CAACH,kBAAkB,CAACW,MAAM,EAAEZ,MAAM,CAACa,WAAW,CAAC,EAGlEd,WAAW,CAACe,MAAM,EAChBX,iBAAiB,CAACF,kBAAkB,CAACS,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAMzDR,iBAAiB,CAACF,kBAAkB,CAACW,MAAM,EAAEZ,MAAM,CAACa,WAAW,CAAC,EAKlET,iBAAiB,CAACH,kBAAkB,CAACS,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAKzDP,iBAAiB,CAACH,kBAAkB,CAACW,MAAM,EAAEZ,MAAM,CAACa,WAAW,CAAC,EAKlEV,iBAAiB,CAACF,kBAAkB,CAACS,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAIzDR,iBAAiB,CAACF,kBAAkB,CAACW,MAAM,EAAEZ,MAAM,CAACa,WAAW,CAAC,EAKtCb,MAAM,CAACe,WAAW,EAIlBf,MAAM,CAACe,WAAW,EAIvCf,MAAM,CAACgB,WAAW,EAKGhB,MAAM,CAACiB,YAAY,EAInBjB,MAAM,CAACkB,WAAW,CAInD;AAWD,IAAMC,WAAW,gBAAGtB,KAAK,CAACuB,UAAU,CAAkC,gBAAsFC,GAAG,EAAK;EAAA,IAA3FC,EAAE,QAAFA,EAAE;IAAEC,UAAU,QAAVA,UAAU;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,iBAAiB,QAAjBA,iBAAiB;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;IAAEC,SAAS,QAATA,SAAS;IAAKC,IAAI;EACtJ,IAAMC,GAAG,GAAG,CAACN,QAAQ,GAAG,WAAW,GAAG,EAAE,EACrCO,MAAM,CAACR,UAAU,KAAK,EAAE,GAAG,eAAe,GAAG,EAAE,CAAC,CAChDQ,MAAM,CAACJ,IAAI,aAAMA,IAAI,SAAM,EAAE,CAAC,CAC9BI,MAAM,CAACN,iBAAiB,GAAG,WAAW,GAAG,EAAE,CAAC,CAC5CM,MAAM,WAAIH,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,OAAI;EAEhC,oBACE,KAAC,kBAAkB;IAAC,GAAG,EAAEP,GAAI;IAAA,uBAC3B,KAAC,iBAAiB;MAAC,EAAE,YAAKC,EAAE,UAAQ;MAAC,yBAAgBA,EAAE,UAAQ;MAAC,SAAS,EAAEQ;IAAI,GAAKD,IAAI;MAAA,UACrFH;IAAQ;EACS,EACD;AAEzB,CAAC,CAAC;AAAC;EAtBDJ,EAAE;EACFC,UAAU;EACVC,QAAQ;EACRC,iBAAiB;EACjBC,QAAQ;AAAA;AAoBV,eAAeP,WAAW"}

package/dist/InputFields/index.cjs

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -77,29 +76,17 @@ Object.defineProperty(exports, "Textarea", {
     return _Textarea.default;
   }
 });
-
 var _TextField = _interopRequireDefault(require("./TextField"));
-
 var _PasswordField = _interopRequireDefault(require("./PasswordField"));
-
 var _Checkbox = _interopRequireDefault(require("./Checkbox"));
-
 var _RadioButton = _interopRequireDefault(require("./RadioButton"));
-
 var _SearchBar = _interopRequireDefault(require("./SearchBar"));
-
 var _Label = _interopRequireDefault(require("./Label"));
-
 var _DatepickerField = _interopRequireDefault(require("./DatepickerField"));
-
 var _Textarea = _interopRequireDefault(require("./Textarea"));
-
 var _QuickSearch = _interopRequireDefault(require("./QuickSearch"));
-
 var _NumberField = _interopRequireDefault(require("./NumberField"));
-
 var _styling = require("./styling");
-
 Object.keys(_styling).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;

package/dist/InputFields/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/InputFields/index.ts"],"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 * from './styling';\n\nexport {\n  TextField,\n  PasswordField,\n  Checkbox,\n  RadioButton,\n  SearchBar,\n  InputLabel,\n  DatepickerField,\n  Textarea,\n  QuickSearch,\n  NumberField\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/InputFields/index.ts"],"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 * from './styling';\n\nexport {\n  TextField,\n  PasswordField,\n  Checkbox,\n  RadioButton,\n  SearchBar,\n  InputLabel,\n  DatepickerField,\n  Textarea,\n  QuickSearch,\n  NumberField\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/dist/InputFields/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["TextField","PasswordField","Checkbox","RadioButton","SearchBar","InputLabel","DatepickerField","Textarea","QuickSearch","NumberField"],"sources":["../../src/InputFields/index.ts"],"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 * from './styling';\n\nexport {\n  TextField,\n  PasswordField,\n  Checkbox,\n  RadioButton,\n  SearchBar,\n  InputLabel,\n  DatepickerField,\n  Textarea,\n  QuickSearch,\n  NumberField\n};\n"],"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,cAAc,WAAd;AAEA,SACET,SADF,EAEEC,aAFF,EAGEC,QAHF,EAIEC,WAJF,EAKEC,SALF,EAMEC,UANF,EAOEC,eAPF,EAQEC,QARF,EASEC,WATF,EAUEC,WAVF"}
+{"version":3,"file":"index.js","names":["TextField","PasswordField","Checkbox","RadioButton","SearchBar","InputLabel","DatepickerField","Textarea","QuickSearch","NumberField"],"sources":["../../src/InputFields/index.ts"],"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 * from './styling';\n\nexport {\n  TextField,\n  PasswordField,\n  Checkbox,\n  RadioButton,\n  SearchBar,\n  InputLabel,\n  DatepickerField,\n  Textarea,\n  QuickSearch,\n  NumberField\n};\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,aAAa;AACnC,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,UAAU,MAAM,SAAS;AAChC,OAAOC,eAAe,MAAM,mBAAmB;AAC/C,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,WAAW,MAAM,eAAe;AAEvC,cAAc,WAAW;AAEzB,SACET,SAAS,EACTC,aAAa,EACbC,QAAQ,EACRC,WAAW,EACXC,SAAS,EACTC,UAAU,EACVC,eAAe,EACfC,QAAQ,EACRC,WAAW,EACXC,WAAW"}

package/dist/InputFields/styling.cjs

@@ -1,39 +1,27 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.activeErrorMessageState = exports.Warning = exports.ValidationStyling = exports.ValidationMessage = exports.StyledIcon = exports.SearchIconWrapper = exports.NoteMessage = exports.InputWrapper = exports.InputFieldStyling = exports.ErrorMessage = exports.AutofilledMessage = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 var _styles = require("../styles");
-
 var _typography = require("../styles/typography");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
-
 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  position: relative;\n"])), function (props) {
   return props.readOnly || props.disabled ? 'cursor: not-allowed;' : '';
 }, function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 });
-
 exports.InputWrapper = InputWrapper;
 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(_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"])), 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_500), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), _styles.COLORS.black, function (props) {
@@ -41,13 +29,10 @@ var InputFieldStyling = _styledComponents.default.input(_templateObject4 || (_te
 }, function (props) {
   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)(_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 Warning = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  ", "\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ", " {\n    ", "\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ", "\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ", "\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n"])), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, null), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, null), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, null), (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, null));
-
 exports.Warning = Warning;
 var ErrorMessage = (0, _styledComponents.default)(Warning)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.critical_500);
 exports.ErrorMessage = ErrorMessage;
@@ -59,9 +44,7 @@ var NoteMessage = (0, _styledComponents.default)(Warning)(_templateObject9 || (_
 exports.NoteMessage = NoteMessage;
 var AutofilledMessage = (0, _styledComponents.default)(Warning)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.neutral_600);
 exports.AutofilledMessage = AutofilledMessage;
-
 var StyledIcon = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 50%;\n"])));
-
 exports.StyledIcon = StyledIcon;
 var SearchIconWrapper = (0, _styledComponents.default)(StyledIcon)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  border-radius: 50%;\n"])));
 exports.SearchIconWrapper = SearchIconWrapper;