@laerdal/life-react-components 1.8.0 → 1.9.0-dev.1

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","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"}
+{"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: 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};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur } = 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

@@ -23,8 +23,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _index = require("../../styles/index");
 
-var _styling = require("../styling");
-
 var _styles = require("../../styles");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -45,7 +43,7 @@ var SearchFieldWrapper = _styledComponents.default.div(_templateObject || (_temp
 
 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    ", "\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, _styling.activeValidationMessageState, _index.COLORS.neutral_100);
+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) {

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

@@ -1 +1 @@
-{"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","activeValidationMessageState","neutral_100","SearchField","React","forwardRef","ref","id","searchTerm","disabled","validationMessage","children","size","className","rest","cls","concat"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAIO,IAAMA,kBAAkB,GAAGC,0BAAOC,GAAV,iIAEzBC,kBAFyB,CAAxB;;;;AAMA,IAAMC,iBAAiB,GAAGH,0BAAOC,GAAV,imCAGEG,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,EAiExBC,qCAjEwB,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 {activeValidationMessageState} from '../styling';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles';\nimport {Z_INDEXES} from '../../styles/z-indexes';\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    ${activeValidationMessageState}\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"}
+{"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;;;;;;;;;;;;;;;;AAGO,IAAMA,kBAAkB,GAAGC,0BAAOC,GAAV,iIAEzBC,kBAFyB,CAAxB;;;;AAMA,IAAMC,iBAAiB,GAAGH,0BAAOC,GAAV,4nCAGEG,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;;;AAoFP,IAAMC,WAAW,gBAAGC,KAAK,CAACC,UAAN,CAAkD,gBAAsFC,GAAtF,EAA8F;AAAA,MAA3FC,EAA2F,QAA3FA,EAA2F;AAAA,MAAvFC,UAAuF,QAAvFA,UAAuF;AAAA,MAA3EC,QAA2E,QAA3EA,QAA2E;AAAA,MAAjEC,iBAAiE,QAAjEA,iBAAiE;AAAA,MAA9CC,QAA8C,QAA9CA,QAA8C;AAAA,MAApCC,IAAoC,QAApCA,IAAoC;AAAA,MAA9BC,SAA8B,QAA9BA,SAA8B;AAAA,MAAhBC,IAAgB;AAClK,MAAMC,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;AAMA,sBACE,qBAAC,kBAAD;AAAoB,IAAA,GAAG,EAAEP,GAAzB;AAAA,2BACE,qBAAC,iBAAD;AAAmB,MAAA,EAAE,YAAKC,EAAL,UAArB;AAAqC,+BAAgBA,EAAhB,UAArC;AAAgE,MAAA,SAAS,EAAEQ;AAA3E,OAAoFD,IAApF;AAAA,gBACGH;AADH;AADF,IADF;AAOD,CAdmB,CAApB;;AAREJ,EAAAA,E;AACAC,EAAAA,U;AACAC,EAAAA,Q;AACAC,EAAAA,iB;AACAC,EAAAA,Q;;eAoBaR,W","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"],"file":"SearchField.cjs"}

package/dist/InputFields/components/SearchField.js

@@ -13,11 +13,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import * as React from 'react';
 import styled from 'styled-components';
 import { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';
-import { activeValidationMessageState } from '../styling';
 import { ComponentMStyling, ComponentSStyling } from '../../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var SearchFieldWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.focus-visible-within {\n    ", "\n  }\n"])), focusStyles);
-export var StyledSearchField = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ", ";\n  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    ", "\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, activeValidationMessageState, COLORS.neutral_100);
+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,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/components/SearchField.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","activeValidationMessageState","ComponentMStyling","ComponentSStyling","SearchFieldWrapper","div","StyledSearchField","neutral_400","white","Regular","black","Italic","neutral_500","MEDIUM","primary_800","neutral_600","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,4BAAR,QAA2C,YAA3C;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,QAAmD,cAAnD;;AAIA,OAAO,IAAMC,kBAAkB,GAAGR,MAAM,CAACS,GAAV,mHAEzBL,WAFyB,CAAxB;AAMP,OAAO,IAAMM,iBAAiB,GAAGV,MAAM,CAACS,GAAV,mlCAGEP,MAAM,CAACS,WAHT,EAURT,MAAM,CAACU,KAVC,EAY1BL,iBAAiB,CAACJ,kBAAkB,CAACU,OAApB,EAA6BX,MAAM,CAACY,KAApC,CAZS,EAkBxBP,iBAAiB,CAACJ,kBAAkB,CAACY,MAApB,EAA4Bb,MAAM,CAACc,WAAnC,CAlBO,EAqB1Bf,WAAW,CAACgB,MArBc,EAsBxBX,iBAAiB,CAACH,kBAAkB,CAACU,OAApB,EAA6BX,MAAM,CAACY,KAApC,CAtBO,EA4BtBR,iBAAiB,CAACH,kBAAkB,CAACY,MAApB,EAA4Bb,MAAM,CAACc,WAAnC,CA5BK,EAiCxBT,iBAAiB,CAACJ,kBAAkB,CAACU,OAApB,EAA6BX,MAAM,CAACY,KAApC,CAjCO,EAsCtBP,iBAAiB,CAACJ,kBAAkB,CAACY,MAApB,EAA4Bb,MAAM,CAACc,WAAnC,CAtCK,EA2CxBV,iBAAiB,CAACH,kBAAkB,CAACU,OAApB,EAA6BX,MAAM,CAACY,KAApC,CA3CO,EA+CtBR,iBAAiB,CAACH,kBAAkB,CAACY,MAApB,EAA4Bb,MAAM,CAACc,WAAnC,CA/CK,EAoDId,MAAM,CAACgB,WApDX,EAwDIhB,MAAM,CAACgB,WAxDX,EA4DjBhB,MAAM,CAACiB,WA5DU,EAiExBd,4BAjEwB,EAqEIH,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 {activeValidationMessageState} from '../styling';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles';\nimport {Z_INDEXES} from '../../styles/z-indexes';\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    ${activeValidationMessageState}\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"}
+{"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,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;AAAA,MAA3FC,EAA2F,QAA3FA,EAA2F;AAAA,MAAvFC,UAAuF,QAAvFA,UAAuF;AAAA,MAA3EC,QAA2E,QAA3EA,QAA2E;AAAA,MAAjEC,iBAAiE,QAAjEA,iBAAiE;AAAA,MAA9CC,QAA8C,QAA9CA,QAA8C;AAAA,MAApCC,IAAoC,QAApCA,IAAoC;AAAA,MAA9BC,SAA8B,QAA9BA,SAA8B;AAAA,MAAhBC,IAAgB;;AAClK,MAAMC,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;AAMA,sBACE,KAAC,kBAAD;AAAoB,IAAA,GAAG,EAAEP,GAAzB;AAAA,2BACE,KAAC,iBAAD;AAAmB,MAAA,EAAE,YAAKC,EAAL,UAArB;AAAqC,+BAAgBA,EAAhB,UAArC;AAAgE,MAAA,SAAS,EAAEQ;AAA3E,OAAoFD,IAApF;AAAA,gBACGH;AADH;AADF,IADF;AAOD,CAdmB,CAApB;;AAREJ,EAAAA,E;AACAC,EAAAA,U;AACAC,EAAAA,Q;AACAC,EAAAA,iB;AACAC,EAAAA,Q;;AAoBF,eAAeP,WAAf","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"],"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.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"));
 
@@ -17,58 +17,52 @@ var _styles = require("../styles");
 
 var _typography = require("../styles/typography");
 
-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, _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"])), 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 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 activeValidationMessageState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: inset 0 0 0 2px ", ";\n"])), _styles.COLORS.warning_400);
-exports.activeValidationMessageState = activeValidationMessageState;
-var activeErrorMessageState = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: inset 0 0 0 2px ", ";\n"])), _styles.COLORS.critical_400);
-var activeCorrectInput = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: inset 0 0 0 2px ", ";\n"])), _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  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  ", "\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  &.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"])), 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) {
+}, (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) {
   return props.activeErrorMessage ? activeErrorMessageState : '';
 }, function (props) {
-  return props.correctInput ? activeCorrectInput : '';
-}, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.primary_800, _styles.focusStyles, _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);
-
-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(_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 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)(_templateObject7 || (_templateObject7 = (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 ValidationMessage = (0, _styledComponents.default)(Warning)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), function (props) {
+  return props.type === 'invalid' ? _styles.COLORS.critical_500 : _styles.COLORS.correct_500;
+});
+exports.ValidationMessage = ValidationMessage;
+var NoteMessage = (0, _styledComponents.default)(Warning)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.neutral_500);
+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(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 50%;\n"])));
+var StyledIcon = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (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)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  border-radius: 50%;\n"])));
 exports.SearchIconWrapper = SearchIconWrapper;
 //# sourceMappingURL=styling.cjs.map

package/dist/InputFields/styling.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/styling.ts"],"names":["InputWrapper","styled","div","props","locked","disabled","margin","lockedState","css","COLORS","neutral_100","neutral_300","neutral_600","activeValidationMessageState","warning_400","activeErrorMessageState","critical_400","activeCorrectInput","correct_500","InputFieldStyling","input","withoutBorder","neutral_400","ComponentTextStyle","Italic","BREAKPOINTS","MEDIUM","black","activeValidationMessage","activeErrorMessage","correctInput","primary_800","focusStyles","primary_700","ValidationStyling","Regular","RequiredStar","span","critical_500","Warning","WarningMessage","warning_500","ErrorMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAEO,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,yHAErB,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,IAAgBD,KAAK,CAACE,QAAtB,GAAiC,sBAAjC,GAA0D,EAAtE;AAAA,CAFqB,EAGrB,UAACF,KAAD;AAAA,SAAYA,KAAK,CAACG,MAAN,qBAA0BH,KAAK,CAACG,MAAhC,SAA4C,EAAxD;AAAA,CAHqB,CAAlB;;;AAMP,IAAMC,WAAW,OAAGC,qBAAH,kQACKC,eAAOC,WADZ,EAEeD,eAAOE,WAFtB,EAGNF,eAAOG,WAHD,CAAjB;AAQO,IAAMC,4BAA4B,OAAGL,qBAAH,8HACTC,eAAOK,WADE,CAAlC;;AAGP,IAAMC,uBAAuB,OAAGP,qBAAH,8HACGC,eAAOO,YADV,CAA7B;AAGA,IAAMC,kBAAkB,OAAGT,qBAAH,8HACQC,eAAOS,WADf,CAAxB;;AAIA,IAAMC,iBAAiB,GAAGlB,0BAAOmB,KAAV,yoDAenB,UAACjB,KAAD;AAAA,SACAA,KAAK,CAACkB,aAAN,oJAKiDZ,eAAOa,WALxD,6DAM2Cb,eAAOa,WANlD,wDAOsCb,eAAOa,WAP7C,MADA;AAAA,CAfmB,EAkCjB,mCAAkBC,+BAAmBC,MAArC,EAA6Cf,eAAOG,WAApD,CAlCiB,EAqCnBa,oBAAYC,MArCO,EA4Cf,mCAAkBH,+BAAmBC,MAArC,EAA6Cf,eAAOG,WAApD,CA5Ce,EA+DZH,eAAOkB,KA/DK,EAiEnB,UAACxB,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,GAAeG,WAAf,GAA6B,EAAzC;AAAA,CAjEmB,EAkEnB,UAACJ,KAAD;AAAA,SAAYA,KAAK,CAACyB,uBAAN,GAAgCf,4BAAhC,GAA+D,EAA3E;AAAA,CAlEmB,EAmEnB,UAACV,KAAD;AAAA,SAAYA,KAAK,CAAC0B,kBAAN,GAA2Bd,uBAA3B,GAAqD,EAAjE;AAAA,CAnEmB,EAoEnB,UAACZ,KAAD;AAAA,SAAYA,KAAK,CAAC2B,YAAN,GAAqBb,kBAArB,GAA0C,EAAtD;AAAA,CApEmB,EAuECR,eAAOC,WAvER,EA4EVD,eAAOE,WA5EG,EA+EiBF,eAAOsB,WA/ExB,EAmFjBC,mBAnFiB,EAuGiBvB,eAAOwB,WAvGxB,EA2GiBxB,eAAOsB,WA3GxB,CAAvB;;;AAwHA,IAAMG,iBAAiB,OAAG1B,qBAAH,sUAEjB,qCAAoBe,+BAAmBY,OAAvC,EAAgD1B,eAAOkB,KAAvD,CAFiB,EAWjB,qCAAoBJ,+BAAmBY,OAAvC,EAAgD,SAAhD,CAXiB,CAAvB;;;AAiBO,IAAMC,YAAY,GAAGnC,0BAAOoC,IAAV,4MACd5B,eAAO6B,YADO,CAAlB;;;;AAQA,IAAMC,OAAO,GAAGtC,0BAAOC,GAAV,6WAIhBuB,oBAAYC,MAJI,CAAb;;;AAwBA,IAAMc,cAAc,GAAG,+BAAOD,OAAP,CAAH,0GAChB9B,eAAOgC,WADS,CAApB;;AAGA,IAAMC,YAAY,GAAG,+BAAOH,OAAP,CAAH,0GACd9B,eAAO6B,YADO,CAAlB;;AAGA,IAAMK,iBAAiB,GAAG,+BAAOJ,OAAP,CAAH,0GACnB9B,eAAOG,WADY,CAAvB;;;AAMA,IAAMgC,UAAU,GAAG3C,0BAAOC,GAAV,gHAAhB;;;AAIA,IAAM2C,iBAAiB,GAAG,+BAAOD,UAAP,CAAH,uIAAvB","sourcesContent":["import styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, focusStyles} from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling } from '../styles/typography';\n\nexport const InputWrapper = styled.div<{ locked?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeValidationMessageState = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.warning_400};\n`;\nconst activeErrorMessageState = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\nconst activeCorrectInput = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n`;\n\nconst InputFieldStyling = styled.input<{\n  locked?: boolean;\n  activeValidationMessage?: boolean;\n  activeErrorMessage?: boolean;\n  correctInput?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\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    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\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: ${COLORS.black} !important;\n\n  ${(props) => (props.locked ? lockedState : '')}\n  ${(props) => (props.activeValidationMessage ? activeValidationMessageState : '')}\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n  ${(props) => (props.correctInput ? activeCorrectInput : '')}\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n  \n  &.focus-visible{\n    ${focusStyles}\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 ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n  \n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\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    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const RequiredStar = styled.span`\n  color: ${COLORS.critical_500};\n  font-size: 28px;\n  line-height: 12px;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n`;\nexport const Warning = styled.div`\n  font-size: 12px;\n  line-height: 140%;\n\n  ${BREAKPOINTS.MEDIUM} {\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`;\nexport const WarningMessage = styled(Warning)`\n  color: ${COLORS.warning_500};\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"file":"styling.cjs"}
+{"version":3,"sources":["../../src/InputFields/styling.ts"],"names":["InputWrapper","styled","div","props","readOnly","disabled","margin","readOnlyState","css","COLORS","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","ComponentTextStyle","Italic","neutral_500","BREAKPOINTS","MEDIUM","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","focusStyles","correct_500","primary_700","ValidationStyling","Regular","Warning","ErrorMessage","critical_500","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAGO,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,yHAErB,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,QAAN,IAAkBD,KAAK,CAACE,QAAxB,GAAmC,sBAAnC,GAA4D,EAAxE;AAAA,CAFqB,EAGrB,UAACF,KAAD;AAAA,SAAYA,KAAK,CAACG,MAAN,qBAA0BH,KAAK,CAACG,MAAhC,SAA4C,EAAxD;AAAA,CAHqB,CAAlB;;;AAMP,IAAMC,aAAa,OAAGC,qBAAH,kQACGC,eAAOC,WADV,EAEaD,eAAOE,WAFpB,EAGRF,eAAOG,WAHC,CAAnB;AAQO,IAAMC,uBAAuB,OAAGL,qBAAH,8HACJC,eAAOK,YADH,CAA7B;;;AAIP,IAAMC,iBAAiB,GAAGd,0BAAOe,KAAV,ynDAanB,UAACb,KAAD;AAAA,SACAA,KAAK,CAACc,aAAN,oJAKiDR,eAAOS,WALxD,6DAM2CT,eAAOS,WANlD,wDAOsCT,eAAOS,WAP7C,MADA;AAAA,CAbmB,EAgCjB,mCAAkBC,+BAAmBC,MAArC,EAA6CX,eAAOY,WAApD,CAhCiB,EAmCnBC,oBAAYC,MAnCO,EA0Cf,mCAAkBJ,+BAAmBC,MAArC,EAA6CX,eAAOY,WAApD,CA1Ce,EA6DZZ,eAAOe,KA7DK,EA+DnB,UAACrB,KAAD;AAAA,SAAYA,KAAK,CAACsB,kBAAN,GAA2BZ,uBAA3B,GAAqD,EAAjE;AAAA,CA/DmB,EAkEjB,UAACV,KAAD;AAAA,SAAYA,KAAK,CAACuB,sBAAN,GAA+B,EAA/B,GAAoCnB,aAAhD;AAAA,CAlEiB,EAsECE,eAAOC,WAtER,EA2EVD,eAAOE,WA3EG,EA8EiBF,eAAOkB,WA9ExB,EAkFjBC,mBAlFiB,EAsFWnB,eAAOK,YAtFlB,EAyFWL,eAAOoB,WAzFlB,EAqGiBpB,eAAOqB,WArGxB,EAyGiBrB,eAAOkB,WAzGxB,CAAvB;;;AAqHA,IAAMI,iBAAiB,OAAGvB,qBAAH,sUAEjB,qCAAoBW,+BAAmBa,OAAvC,EAAgDvB,eAAOe,KAAvD,CAFiB,EAWjB,qCAAoBL,+BAAmBa,OAAvC,EAAgD,SAAhD,CAXiB,CAAvB;;;AAiBO,IAAMC,OAAO,GAAGhC,0BAAOC,GAAV,ujBAGhB,qCAAoBiB,+BAAmBa,OAAvC,EAAgD,IAAhD,CAHgB,EAUhBV,oBAAYC,MAVI,EAWd,oCAAmBJ,+BAAmBa,OAAtC,EAA+C,IAA/C,CAXc,EAmBd,qCAAoBb,+BAAmBa,OAAvC,EAAgD,IAAhD,CAnBc,EA0Bd,oCAAmBb,+BAAmBa,OAAtC,EAA+C,IAA/C,CA1Bc,CAAb;;;AA0CA,IAAME,YAAY,GAAG,+BAAOD,OAAP,CAAH,wGACdxB,eAAO0B,YADO,CAAlB;;AAIA,IAAMC,iBAAiB,GAAG,+BAAOH,OAAP,CAAH,wGACnB,UAAC9B,KAAD;AAAA,SAAYA,KAAK,CAACkC,IAAN,KAAe,SAAf,GAA2B5B,eAAO0B,YAAlC,GAAiD1B,eAAOoB,WAApE;AAAA,CADmB,CAAvB;;AAIA,IAAMS,WAAW,GAAG,+BAAOL,OAAP,CAAH,wGACbxB,eAAOY,WADM,CAAjB;;AAGA,IAAMkB,iBAAiB,GAAG,+BAAON,OAAP,CAAH,0GACnBxB,eAAOG,WADY,CAAvB;;;AAMA,IAAM4B,UAAU,GAAGvC,0BAAOC,GAAV,gHAAhB;;;AAIA,IAAMuC,iBAAiB,GAAG,+BAAOD,UAAP,CAAH,uIAAvB","sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport { Size } from '../types';\n\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst readOnlyState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeErrorMessageState = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\n\nconst InputFieldStyling = styled.input<{\n  activeErrorMessage?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n  suppressReadOnlyStyles?: boolean;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\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    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\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: ${COLORS.black} !important;\n\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n\n  &:read-only:not(:disabled) {\n    ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\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 ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\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    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const Warning = styled.div`\n  display: flex;\n  align-items: center;\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\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`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\n\nexport const ValidationMessage = styled(Warning)<{ type: 'valid' | 'invalid' }>`\n  color: ${(props) => (props.type === 'invalid' ? COLORS.critical_500 : COLORS.correct_500)};\n`;\n\nexport const NoteMessage = styled(Warning)`\n  color: ${COLORS.neutral_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"file":"styling.cjs"}

package/dist/InputFields/styling.d.ts

@@ -1,23 +1,23 @@
 export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {
-    locked?: boolean | undefined;
+    readOnly?: boolean | undefined;
     disabled?: boolean | undefined;
     margin?: string | undefined;
 }, never>;
-export declare const activeValidationMessageState: import("styled-components").FlattenSimpleInterpolation;
+export declare const activeErrorMessageState: import("styled-components").FlattenSimpleInterpolation;
 declare const InputFieldStyling: import("styled-components").StyledComponent<"input", any, {
-    locked?: boolean | undefined;
-    activeValidationMessage?: boolean | undefined;
     activeErrorMessage?: boolean | undefined;
-    correctInput?: boolean | undefined;
     active?: boolean | undefined;
     withoutBorder?: boolean | undefined;
     size?: string | undefined;
+    suppressReadOnlyStyles?: boolean | undefined;
 }, never>;
 declare const ValidationStyling: import("styled-components").FlattenSimpleInterpolation;
-export declare const RequiredStar: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Warning: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const WarningMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ErrorMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ValidationMessage: import("styled-components").StyledComponent<"div", any, {
+    type: 'valid' | 'invalid';
+}, never>;
+export declare const NoteMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const AutofilledMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
 export { ValidationStyling, InputFieldStyling };
 export declare const StyledIcon: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/InputFields/styling.js

@@ -1,37 +1,33 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 
-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, _templateObject12;
 
 import styled, { css } from 'styled-components';
 import { BREAKPOINTS, COLORS, focusStyles } from '../styles';
-import { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling } from '../styles/typography';
+import { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';
 export var InputWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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, ";") : '';
 });
-var lockedState = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_600);
-export var activeValidationMessageState = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  box-shadow: inset 0 0 0 2px ", ";\n"])), COLORS.warning_400);
-var activeErrorMessageState = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  box-shadow: inset 0 0 0 2px ", ";\n"])), COLORS.critical_400);
-var activeCorrectInput = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  box-shadow: inset 0 0 0 2px ", ";\n"])), COLORS.correct_500);
-var InputFieldStyling = styled.input(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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  ", "\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  &.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 readOnlyState = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_600);
+export var activeErrorMessageState = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  box-shadow: inset 0 0 0 2px ", ";\n"])), COLORS.critical_400);
+var InputFieldStyling = styled.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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(COLORS.neutral_400, ";\n      -moz-box-shadow: inset 0px 0px 0px 1px ").concat(COLORS.neutral_400, ";\n      box-shadow: inset 0px 0px 0px 1px ").concat(COLORS.neutral_400, ";");
-}, ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600), COLORS.black, function (props) {
-  return props.locked ? lockedState : '';
-}, function (props) {
-  return props.activeValidationMessage ? activeValidationMessageState : '';
-}, function (props) {
+}, ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), COLORS.black, function (props) {
   return props.activeErrorMessage ? activeErrorMessageState : '';
 }, function (props) {
-  return props.correctInput ? activeCorrectInput : '';
-}, COLORS.neutral_100, COLORS.neutral_300, COLORS.primary_800, focusStyles, COLORS.primary_700, COLORS.primary_800);
-var ValidationStyling = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\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"])), ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468'));
-export var RequiredStar = styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 28px;\n  line-height: 12px;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n"])), COLORS.critical_500);
-export var Warning = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\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"])), BREAKPOINTS.MEDIUM);
-export var WarningMessage = styled(Warning)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.warning_500);
-export var ErrorMessage = styled(Warning)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.critical_500);
-export var AutofilledMessage = styled(Warning)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.neutral_600);
+  return props.suppressReadOnlyStyles ? '' : readOnlyState;
+}, COLORS.neutral_100, COLORS.neutral_300, COLORS.primary_800, focusStyles, COLORS.critical_400, COLORS.correct_500, COLORS.primary_700, COLORS.primary_800);
+var ValidationStyling = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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"])), ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468'));
+export var Warning = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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"])), ComponentXXSStyling(ComponentTextStyle.Regular, null), BREAKPOINTS.MEDIUM, ComponentXSStyling(ComponentTextStyle.Regular, null), ComponentXXSStyling(ComponentTextStyle.Regular, null), ComponentXSStyling(ComponentTextStyle.Regular, null));
+export var ErrorMessage = styled(Warning)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.critical_500);
+export var ValidationMessage = styled(Warning)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (props) {
+  return props.type === 'invalid' ? COLORS.critical_500 : COLORS.correct_500;
+});
+export var NoteMessage = styled(Warning)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.neutral_500);
+export var AutofilledMessage = styled(Warning)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.neutral_600);
 export { ValidationStyling, InputFieldStyling };
-export var StyledIcon = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  border-radius: 50%;\n"])));
-export var SearchIconWrapper = styled(StyledIcon)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  position: absolute;\n  border-radius: 50%;\n"])));
+export var StyledIcon = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  border-radius: 50%;\n"])));
+export var SearchIconWrapper = styled(StyledIcon)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  position: absolute;\n  border-radius: 50%;\n"])));
 //# sourceMappingURL=styling.js.map

package/dist/InputFields/styling.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/styling.ts"],"names":["styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","InputWrapper","div","props","locked","disabled","margin","lockedState","neutral_100","neutral_300","neutral_600","activeValidationMessageState","warning_400","activeErrorMessageState","critical_400","activeCorrectInput","correct_500","InputFieldStyling","input","withoutBorder","neutral_400","Italic","MEDIUM","black","activeValidationMessage","activeErrorMessage","correctInput","primary_800","primary_700","ValidationStyling","Regular","RequiredStar","span","critical_500","Warning","WarningMessage","warning_500","ErrorMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, focusStyles} from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling } from '../styles/typography';\n\nexport const InputWrapper = styled.div<{ locked?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeValidationMessageState = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.warning_400};\n`;\nconst activeErrorMessageState = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\nconst activeCorrectInput = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n`;\n\nconst InputFieldStyling = styled.input<{\n  locked?: boolean;\n  activeValidationMessage?: boolean;\n  activeErrorMessage?: boolean;\n  correctInput?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\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    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\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: ${COLORS.black} !important;\n\n  ${(props) => (props.locked ? lockedState : '')}\n  ${(props) => (props.activeValidationMessage ? activeValidationMessageState : '')}\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n  ${(props) => (props.correctInput ? activeCorrectInput : '')}\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n  \n  &.focus-visible{\n    ${focusStyles}\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 ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n  \n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\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    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const RequiredStar = styled.span`\n  color: ${COLORS.critical_500};\n  font-size: 28px;\n  line-height: 12px;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n`;\nexport const Warning = styled.div`\n  font-size: 12px;\n  line-height: 140%;\n\n  ${BREAKPOINTS.MEDIUM} {\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`;\nexport const WarningMessage = styled(Warning)`\n  color: ${COLORS.warning_500};\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"file":"styling.js"}
+{"version":3,"sources":["../../src/InputFields/styling.ts"],"names":["styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentXSStyling","InputWrapper","div","props","readOnly","disabled","margin","readOnlyState","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","Italic","neutral_500","MEDIUM","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","correct_500","primary_700","ValidationStyling","Regular","Warning","ErrorMessage","critical_500","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport { Size } from '../types';\n\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst readOnlyState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeErrorMessageState = css`\n  box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\n\nconst InputFieldStyling = styled.input<{\n  activeErrorMessage?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n  suppressReadOnlyStyles?: boolean;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\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    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\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: ${COLORS.black} !important;\n\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n\n  &:read-only:not(:disabled) {\n    ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.focus-visible {\n    ${focusStyles}\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\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 ${COLORS.primary_700};\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\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    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const Warning = styled.div`\n  display: flex;\n  align-items: center;\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\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`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\n\nexport const ValidationMessage = styled(Warning)<{ type: 'valid' | 'invalid' }>`\n  color: ${(props) => (props.type === 'invalid' ? COLORS.critical_500 : COLORS.correct_500)};\n`;\n\nexport const NoteMessage = styled(Warning)`\n  color: ${COLORS.neutral_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"file":"styling.js"}

package/dist/InputFields/types.cjs

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.cjs.map

package/dist/InputFields/types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"types.cjs"}