@laerdal/life-react-components 6.0.0-dev.2.full → 6.0.0-dev.20.full

package/dist/InputFields/components/SearchBarInput.cjs

@@ -42,7 +42,10 @@ const Search = exports.Search = _styledComponents.default.input.attrs(() => ({
   }
 
   &::placeholder {
-    ${props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_500', props.theme))}
+    ${props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   }
 
   height: 32px;
@@ -50,14 +53,23 @@ const Search = exports.Search = _styledComponents.default.input.attrs(() => ({
   margin-left: 48px;
   outline: none;
 
-  ${props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.getColor('black', props.theme))}
+  ${props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
   ::placeholder {
-    ${props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_600', props.theme))}
+    ${props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   }
 
   ${_index.BREAKPOINTS.MEDIUM} {
     ::placeholder {
-      ${props => (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_600', props.theme))}
+      ${props => (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 
@@ -65,16 +77,25 @@ const Search = exports.Search = _styledComponents.default.input.attrs(() => ({
     margin-left: 44px;
 
     ::placeholder {
-      ${props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_600', props.theme))}
+      ${props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 
   &.medium {
     margin-left: 48px;
-    ${props => (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.getColor('black', props.theme))}
+    ${props => (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
     
     ::placeholder {
-      ${props => (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_600', props.theme))}
+      ${props => (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBarInput.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_index","_styles","_common","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Search","exports","styled","input","attrs","type","props","ComponentSStyling","ComponentTextStyle","Italic","COLORS","getColor","theme","Regular","BREAKPOINTS","MEDIUM","ComponentMStyling","SearchBarInput","forwardRef","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","useFocusVisibleRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","key","preventDefault","stopPropagation","jsx","className","tabIndex","onChange","target","value","onKeyPress","propTypes","_propTypes","string","isRequired","func","bool","array","_default"],"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\r\nimport { Size } from '../../types';\r\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\r\nimport { useFocusVisibleRef } from '../../common';\r\n\r\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\r\n  appearance: none;\r\n  width: calc(100% - 96px);\r\n\r\n  /* To prevent browser putting its own cross inside the search bar */\r\n\r\n  &::-ms-clear {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n\r\n  &::-ms-reveal {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n\r\n  &::-webkit-search-decoration,\r\n  &::-webkit-search-cancel-button,\r\n  &::-webkit-search-results-button,\r\n  &::-webkit-search-results-decoration {\r\n    display: none;\r\n  }\r\n\r\n  &::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n\r\n  height: 32px;\r\n  border-width: 0;\r\n  margin-left: 48px;\r\n  outline: none;\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  ::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    margin-left: 44px;\r\n\r\n    ::placeholder {\r\n      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    margin-left: 48px;\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    \r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    background: transparent;\r\n    border: none;\r\n  }\r\n`;\r\n\r\ntype SearchBarInputProps = {\r\n  id: string;\r\n  searchTerm?: string;\r\n  setSearchTerm: (term: string) => void;\r\n  enterSearch: (e: any) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  size?: Size.Small | Size.Medium;\r\n  onBlur?: (e: any) => void;\r\n  focusParentRefs?: React.RefObject<any>[];\r\n  onClick?: ()=>void;\r\n};\r\n\r\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\r\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\r\n\r\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\r\n\r\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  return (\r\n    <Search\r\n      placeholder={disabled ? '' : placeholder}\r\n      ref={elementRef}\r\n      id={id}\r\n      data-testid={id}\r\n      className={size ? size : ''}\r\n      tabIndex={0}\r\n      disabled={disabled}\r\n      onChange={(e: any) => setSearchTerm(e.target.value)}\r\n      value={searchTerm}\r\n      onBlur={(e) => onBlur && onBlur(e)}\r\n      onKeyDown={onKeyDown}\r\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\r\n      onClick={onClick}\r\n    />\r\n  );\r\n});\r\n\r\nexport default SearchBarInput;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchBarInput.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_index","_styles","_common","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Search","exports","styled","input","attrs","type","props","ComponentSStyling","ComponentTextStyle","Italic","COLORS","generateToken","componentType","defaultVariant","theme","Regular","BREAKPOINTS","MEDIUM","ComponentMStyling","SearchBarInput","forwardRef","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","useFocusVisibleRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","key","preventDefault","stopPropagation","jsx","className","tabIndex","onChange","target","value","onKeyPress","propTypes","_propTypes","string","isRequired","func","bool","array","_default"],"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\r\nimport { Size } from '../../types';\r\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\r\nimport { useFocusVisibleRef } from '../../common';\r\n\r\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\r\n  appearance: none;\r\n  width: calc(100% - 96px);\r\n\r\n  /* To prevent browser putting its own cross inside the search bar */\r\n\r\n  &::-ms-clear {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n\r\n  &::-ms-reveal {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n\r\n  &::-webkit-search-decoration,\r\n  &::-webkit-search-cancel-button,\r\n  &::-webkit-search-results-button,\r\n  &::-webkit-search-results-decoration {\r\n    display: none;\r\n  }\r\n\r\n  &::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  height: 32px;\r\n  border-width: 0;\r\n  margin-left: 48px;\r\n  outline: none;\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n  ::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    margin-left: 44px;\r\n\r\n    ::placeholder {\r\n      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    margin-left: 48px;\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n    \r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    background: transparent;\r\n    border: none;\r\n  }\r\n`;\r\n\r\ntype SearchBarInputProps = {\r\n  id: string;\r\n  searchTerm?: string;\r\n  setSearchTerm: (term: string) => void;\r\n  enterSearch: (e: any) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  size?: Size.Small | Size.Medium;\r\n  onBlur?: (e: any) => void;\r\n  focusParentRefs?: React.RefObject<any>[];\r\n  onClick?: ()=>void;\r\n};\r\n\r\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\r\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\r\n\r\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\r\n\r\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  return (\r\n    <Search\r\n      placeholder={disabled ? '' : placeholder}\r\n      ref={elementRef}\r\n      id={id}\r\n      data-testid={id}\r\n      className={size ? size : ''}\r\n      tabIndex={0}\r\n      disabled={disabled}\r\n      onChange={(e: any) => setSearchTerm(e.target.value)}\r\n      value={searchTerm}\r\n      onBlur={(e) => onBlur && onBlur(e)}\r\n      onKeyDown={onKeyDown}\r\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\r\n      onClick={onClick}\r\n    />\r\n  );\r\n});\r\n\r\nexport default SearchBarInput;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/components/SearchBarInput.js

@@ -33,7 +33,10 @@ export const Search = styled.input.attrs(() => ({
   }
 
   &::placeholder {
-    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}
+    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   }
 
   height: 32px;
@@ -41,14 +44,23 @@ export const Search = styled.input.attrs(() => ({
   margin-left: 48px;
   outline: none;
 
-  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
   ::placeholder {
-    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}
+    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   }
 
   ${BREAKPOINTS.MEDIUM} {
     ::placeholder {
-      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}
+      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 
@@ -56,16 +68,25 @@ export const Search = styled.input.attrs(() => ({
     margin-left: 44px;
 
     ::placeholder {
-      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}
+      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 
   &.medium {
     margin-left: 48px;
-    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
     
     ::placeholder {
-      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}
+      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBarInput.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","useFocusVisibleRef","jsx","_jsx","Search","input","attrs","type","props","Italic","getColor","theme","Regular","MEDIUM","SearchBarInput","forwardRef","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","e","key","preventDefault","stopPropagation","className","tabIndex","onChange","target","value","onKeyPress","propTypes","_pt","string","isRequired","func","bool","array"],"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\r\nimport { Size } from '../../types';\r\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\r\nimport { useFocusVisibleRef } from '../../common';\r\n\r\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\r\n  appearance: none;\r\n  width: calc(100% - 96px);\r\n\r\n  /* To prevent browser putting its own cross inside the search bar */\r\n\r\n  &::-ms-clear {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n\r\n  &::-ms-reveal {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n\r\n  &::-webkit-search-decoration,\r\n  &::-webkit-search-cancel-button,\r\n  &::-webkit-search-results-button,\r\n  &::-webkit-search-results-decoration {\r\n    display: none;\r\n  }\r\n\r\n  &::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n\r\n  height: 32px;\r\n  border-width: 0;\r\n  margin-left: 48px;\r\n  outline: none;\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  ::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    margin-left: 44px;\r\n\r\n    ::placeholder {\r\n      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    margin-left: 48px;\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    \r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    background: transparent;\r\n    border: none;\r\n  }\r\n`;\r\n\r\ntype SearchBarInputProps = {\r\n  id: string;\r\n  searchTerm?: string;\r\n  setSearchTerm: (term: string) => void;\r\n  enterSearch: (e: any) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  size?: Size.Small | Size.Medium;\r\n  onBlur?: (e: any) => void;\r\n  focusParentRefs?: React.RefObject<any>[];\r\n  onClick?: ()=>void;\r\n};\r\n\r\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\r\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\r\n\r\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\r\n\r\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  return (\r\n    <Search\r\n      placeholder={disabled ? '' : placeholder}\r\n      ref={elementRef}\r\n      id={id}\r\n      data-testid={id}\r\n      className={size ? size : ''}\r\n      tabIndex={0}\r\n      disabled={disabled}\r\n      onChange={(e: any) => setSearchTerm(e.target.value)}\r\n      value={searchTerm}\r\n      onBlur={(e) => onBlur && onBlur(e)}\r\n      onKeyDown={onKeyDown}\r\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\r\n      onClick={onClick}\r\n    />\r\n  );\r\n});\r\n\r\nexport default SearchBarInput;\r\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,WAAW,EAAEC,MAAM,EAAEC,kBAAkB,QAAQ,oBAAoB;AAE5E,SAASC,iBAAiB,EAAEC,iBAAiB,QAAQ,cAAc;AACnE,SAASC,kBAAkB,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAElD,OAAO,MAAMC,MAAM,GAAGT,MAAM,CAACU,KAAK,CAACC,KAAK,CAAC,OAAO;EAAEC,IAAI,EAAE;AAAS,CAAC,CAAC,CAAC;AACpE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAK,IAAIR,iBAAiB,CAACF,kBAAkB,CAACW,MAAM,EAAEZ,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AACxG;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIH,KAAK,IAAIR,iBAAiB,CAACF,kBAAkB,CAACc,OAAO,EAAEf,MAAM,CAACa,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AACjG;AACA,MAAMH,KAAK,IAAIR,iBAAiB,CAACF,kBAAkB,CAACW,MAAM,EAAEZ,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AACxG;AACA;AACA,IAAIf,WAAW,CAACiB,MAAM;AACtB;AACA,QAAQL,KAAK,IAAIT,iBAAiB,CAACD,kBAAkB,CAACW,MAAM,EAAEZ,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQH,KAAK,IAAIR,iBAAiB,CAACF,kBAAkB,CAACW,MAAM,EAAEZ,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AAC1G;AACA;AACA;AACA;AACA;AACA,MAAMH,KAAK,IAAIT,iBAAiB,CAACD,kBAAkB,CAACc,OAAO,EAAEf,MAAM,CAACa,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AACnG;AACA;AACA,QAAQH,KAAK,IAAIT,iBAAiB,CAACD,kBAAkB,CAACW,MAAM,EAAEZ,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AAC1G;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAgBD,MAAMG,cAAc,gBAAGpB,KAAK,CAACqB,UAAU,CAAwC,CAACP,KAA0B,EAAEQ,GAAG,KAAK;EAClH,MAAM;IAAEC,EAAE;IAAEC,UAAU;IAAEC,aAAa;IAAEC,WAAW;IAAEC,WAAW;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,IAAI;IAAEC,MAAM;IAAEC;EAAQ,CAAC,GAAGlB,KAAK;EAErH,MAAMmB,UAAU,GAAG1B,kBAAkB,CAACO,KAAK,CAACoB,eAAe,IAAI,EAAE,CAAC;EAElElC,KAAK,CAACmC,mBAAmB,CAACb,GAAG,EAAE,MAAMW,UAAU,CAACG,OAAO,EAAE,CAACH,UAAU,CAAC,CAAC;EAEtE,MAAMI,eAAe,GAAIC,CAAM,IAAK;IAClC,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAE;MACrBD,CAAC,CAACE,cAAc,CAAC,CAAC;MAClBF,CAAC,CAACG,eAAe,CAAC,CAAC;MACnB,OAAO,IAAI;IACb;IACA,OAAO,KAAK;EACd,CAAC;EAED,oBACEhC,IAAA,CAACC,MAAM;IACLiB,WAAW,EAAEC,QAAQ,GAAG,EAAE,GAAGD,WAAY;IACzCL,GAAG,EAAEW,UAAW;IAChBV,EAAE,EAAEA,EAAG;IACP,eAAaA,EAAG;IAChBmB,SAAS,EAAEZ,IAAI,GAAGA,IAAI,GAAG,EAAG;IAC5Ba,QAAQ,EAAE,CAAE;IACZf,QAAQ,EAAEA,QAAS;IACnBgB,QAAQ,EAAGN,CAAM,IAAKb,aAAa,CAACa,CAAC,CAACO,MAAM,CAACC,KAAK,CAAE;IACpDA,KAAK,EAAEtB,UAAW;IAClBO,MAAM,EAAGO,CAAC,IAAKP,MAAM,IAAIA,MAAM,CAACO,CAAC,CAAE;IACnCT,SAAS,EAAEA,SAAU;IACrBkB,UAAU,EAAGT,CAAM,IAAMD,eAAe,CAACC,CAAC,CAAC,GAAGZ,WAAW,CAACY,CAAC,CAAC,GAAG,IAAM;IACrEN,OAAO,EAAEA;EAAQ,CAClB,CAAC;AAEN,CAAC,CAAC;AAACZ,cAAA,CAAA4B,SAAA;EA9CDzB,EAAE,EAAA0B,GAAA,CAAAC,MAAA,CAAAC,UAAA;EACF3B,UAAU,EAAAyB,GAAA,CAAAC,MAAA;EACVzB,aAAa,EAAAwB,GAAA,CAAAG,IAAA,CAAAD,UAAA;EACbzB,WAAW,EAAAuB,GAAA,CAAAG,IAAA,CAAAD,UAAA;EACXxB,WAAW,EAAAsB,GAAA,CAAAC,MAAA;EACXtB,QAAQ,EAAAqB,GAAA,CAAAI,IAAA;EACRxB,SAAS,EAAAoB,GAAA,CAAAG,IAAA;EAETrB,MAAM,EAAAkB,GAAA,CAAAG,IAAA;EACNlB,eAAe,EAAAe,GAAA,CAAAK,KAAA;EACftB,OAAO,EAAAiB,GAAA,CAAAG;AAAA;AAsCT,eAAehC,cAAc","ignoreList":[]}
+{"version":3,"file":"SearchBarInput.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","useFocusVisibleRef","jsx","_jsx","Search","input","attrs","type","props","Italic","generateToken","componentType","defaultVariant","theme","Regular","MEDIUM","SearchBarInput","forwardRef","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","e","key","preventDefault","stopPropagation","className","tabIndex","onChange","target","value","onKeyPress","propTypes","_pt","string","isRequired","func","bool","array"],"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\r\nimport { Size } from '../../types';\r\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\r\nimport { useFocusVisibleRef } from '../../common';\r\n\r\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\r\n  appearance: none;\r\n  width: calc(100% - 96px);\r\n\r\n  /* To prevent browser putting its own cross inside the search bar */\r\n\r\n  &::-ms-clear {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n\r\n  &::-ms-reveal {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n\r\n  &::-webkit-search-decoration,\r\n  &::-webkit-search-cancel-button,\r\n  &::-webkit-search-results-button,\r\n  &::-webkit-search-results-decoration {\r\n    display: none;\r\n  }\r\n\r\n  &::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  height: 32px;\r\n  border-width: 0;\r\n  margin-left: 48px;\r\n  outline: none;\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n  ::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    margin-left: 44px;\r\n\r\n    ::placeholder {\r\n      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    margin-left: 48px;\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n    \r\n    ::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    background: transparent;\r\n    border: none;\r\n  }\r\n`;\r\n\r\ntype SearchBarInputProps = {\r\n  id: string;\r\n  searchTerm?: string;\r\n  setSearchTerm: (term: string) => void;\r\n  enterSearch: (e: any) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  size?: Size.Small | Size.Medium;\r\n  onBlur?: (e: any) => void;\r\n  focusParentRefs?: React.RefObject<any>[];\r\n  onClick?: ()=>void;\r\n};\r\n\r\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\r\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\r\n\r\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\r\n\r\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  return (\r\n    <Search\r\n      placeholder={disabled ? '' : placeholder}\r\n      ref={elementRef}\r\n      id={id}\r\n      data-testid={id}\r\n      className={size ? size : ''}\r\n      tabIndex={0}\r\n      disabled={disabled}\r\n      onChange={(e: any) => setSearchTerm(e.target.value)}\r\n      value={searchTerm}\r\n      onBlur={(e) => onBlur && onBlur(e)}\r\n      onKeyDown={onKeyDown}\r\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\r\n      onClick={onClick}\r\n    />\r\n  );\r\n});\r\n\r\nexport default SearchBarInput;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/components/SearchField.cjs

@@ -26,7 +26,10 @@ const SearchFieldWrapper = exports.SearchFieldWrapper = _styledComponents.defaul
 const StyledSearchField = exports.StyledSearchField = _styledComponents.default.div`
   display: flex;
   flex-direction: row;
-  box-shadow: inset 0 0 0 1px ${props => _index.COLORS.getColor('neutral_400', props.theme)};
+  box-shadow: inset 0 0 0 1px ${props => _index.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'default'
+}, props.theme)};
   margin-bottom: 4px;
   box-sizing: border-box;
   border-radius: 56px;
@@ -34,66 +37,108 @@ const StyledSearchField = exports.StyledSearchField = _styledComponents.default.
   position: relative;
   height: 48px;
   appearance: none;
-  background-color: ${props => _index.COLORS.getColor('white', props.theme)};
+  background-color: ${props => _index.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
 
-  ${props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.getColor('black', props.theme))}
+  ${props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
 
   padding: 0 !important;
   width: 100%;
 
   &::placeholder {
-    ${props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_500', props.theme))}
+    ${props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   }
 
   ${_index.BREAKPOINTS.MEDIUM} {
-    ${props => (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.getColor('black', props.theme))}
+    ${props => (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
 
     height: 56px;
     padding: 0 4px !important;
 
     &::placeholder {
-      ${props => (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_500', props.theme))}
+      ${props => (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 
   &.small {
-    ${props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.getColor('black', props.theme))}
+    ${props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
     height: 48px;
     padding: 0 !important;
 
     &::placeholder {
-      ${props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_500', props.theme))}
+      ${props => (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 
   &.medium {
-    ${props => (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.getColor('black', props.theme))}
+    ${props => (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
     height: 56px;
 
     &::placeholder {
-      ${props => (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_500', props.theme))}
+      ${props => (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 
   &:hover {
-    box-shadow: inset 0 0 0 2px ${props => _index.COLORS.getColor('primary_800', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _index.COLORS.generateToken({
+  componentType: 'border',
+  state: 'hover'
+}, props.theme)};
   }
 
   &:focus-within {
-    box-shadow: inset 0 0 0 2px ${props => _index.COLORS.getColor('primary_800', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _index.COLORS.generateToken({
+  componentType: 'border',
+  state: 'active'
+}, props.theme)};
   }
 
   div {
-    color: ${props => _index.COLORS.getColor('neutral_600', props.theme)};
+    color: ${props => _index.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
     background-color: transparent;
   }
 
   &.invalid {
-    box-shadow: inset 0 0 0 2px ${props => _index.COLORS.getColor('critical_400', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _index.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'critical'
+}, props.theme)};
   }
 
   &.disabled {
-    box-shadow: inset 0 0 0 1px ${props => _index.COLORS.getColor('neutral_100', props.theme)};
+    box-shadow: inset 0 0 0 1px ${props => _index.COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
     pointer-events: none;
     background-color: transparent !important;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"SearchField.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_index","_styles","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","SearchFieldWrapper","exports","styled","div","focusStyles","StyledSearchField","props","COLORS","getColor","theme","ComponentSStyling","ComponentTextStyle","Regular","Italic","BREAKPOINTS","MEDIUM","ComponentMStyling","SearchField","forwardRef","_ref","ref","id","searchTerm","disabled","validationMessage","children","size","className","rest","_objectWithoutProperties2","cls","concat","jsx","propTypes","_propTypes","string","isRequired","bool","any","_default"],"sources":["../../../src/InputFields/components/SearchField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';\r\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\r\nimport { Size } from '../../types';\r\n\r\nexport const SearchFieldWrapper = styled.div`\r\n  &.focus-visible-within {\r\n    ${focusStyles}\r\n  }\r\n`;\r\n\r\nexport const StyledSearchField = styled.div<{ $activeValidationMessage?: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n  margin-bottom: 4px;\r\n  box-sizing: border-box;\r\n  border-radius: 56px;\r\n  align-items: center;\r\n  position: relative;\r\n  height: 48px;\r\n  appearance: none;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n\r\n  padding: 0 !important;\r\n  width: 100%;\r\n\r\n  &::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n\r\n    height: 56px;\r\n    padding: 0 4px !important;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    height: 48px;\r\n    padding: 0 !important;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    height: 56px;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  div {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n    background-color: transparent;\r\n  }\r\n\r\n  &.invalid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_400', props.theme)};\r\n  }\r\n\r\n  &.disabled {\r\n    box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    pointer-events: none;\r\n    background-color: transparent !important;\r\n  }\r\n`;\r\n\r\ntype SeachFieldProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  id: string;\r\n  searchTerm?: string;\r\n  disabled?: boolean;\r\n  validationMessage?: string;\r\n  children: any;\r\n  size?: Size.Small | Size.Medium;\r\n};\r\n\r\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({ id, searchTerm, disabled, validationMessage, children, size, className, ...rest }, ref) => {\r\n  const cls = (disabled ? 'disabled ' : '')\r\n    .concat(searchTerm !== '' ? 'searchactive ' : '')\r\n    .concat(size ? `${size} ` : '')\r\n    .concat(validationMessage ? ' invalid ' : '')\r\n    .concat(`${className ?? ''} `);\r\n\r\n  return (\r\n    <SearchFieldWrapper ref={ref}>\r\n      <StyledSearchField id={`${id}_main`} data-testid={`${id}_main`} className={cls} {...rest}>\r\n        {children}\r\n      </StyledSearchField>\r\n    </SearchFieldWrapper>\r\n  );\r\n});\r\n\r\nexport default SearchField;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchField.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_index","_styles","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","SearchFieldWrapper","exports","styled","div","focusStyles","StyledSearchField","props","COLORS","generateToken","componentType","defaultVariant","theme","ComponentSStyling","ComponentTextStyle","Regular","Italic","BREAKPOINTS","MEDIUM","ComponentMStyling","state","SearchField","forwardRef","_ref","ref","id","searchTerm","disabled","validationMessage","children","size","className","rest","_objectWithoutProperties2","cls","concat","jsx","propTypes","_propTypes","string","isRequired","bool","any","_default"],"sources":["../../../src/InputFields/components/SearchField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';\r\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\r\nimport { Size } from '../../types';\r\n\r\nexport const SearchFieldWrapper = styled.div`\r\n  &.focus-visible-within {\r\n    ${focusStyles}\r\n  }\r\n`;\r\n\r\nexport const StyledSearchField = styled.div<{ $activeValidationMessage?: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType: 'border', defaultVariant:'default'}, props.theme)};\r\n  margin-bottom: 4px;\r\n  box-sizing: border-box;\r\n  border-radius: 56px;\r\n  align-items: center;\r\n  position: relative;\r\n  height: 48px;\r\n  appearance: none;\r\n  background-color: ${props => COLORS.generateToken({componentType: 'bg-surface', defaultVariant: 'default'}, props.theme)};\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n\r\n  padding: 0 !important;\r\n  width: 100%;\r\n\r\n  &::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n\r\n    height: 56px;\r\n    padding: 0 4px !important;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n    height: 48px;\r\n    padding: 0 !important;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n    height: 56px;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'hover'}, props.theme)};\r\n  }\r\n\r\n  &:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'active'}, props.theme)};\r\n  }\r\n\r\n  div {\r\n    color: ${props => COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme)};\r\n    background-color: transparent;\r\n  }\r\n\r\n  &.invalid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'critical'}, props.theme)};\r\n  }\r\n\r\n  &.disabled {\r\n    box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n    pointer-events: none;\r\n    background-color: transparent !important;\r\n  }\r\n`;\r\n\r\ntype SeachFieldProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  id: string;\r\n  searchTerm?: string;\r\n  disabled?: boolean;\r\n  validationMessage?: string;\r\n  children: any;\r\n  size?: Size.Small | Size.Medium;\r\n};\r\n\r\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({ id, searchTerm, disabled, validationMessage, children, size, className, ...rest }, ref) => {\r\n  const cls = (disabled ? 'disabled ' : '')\r\n    .concat(searchTerm !== '' ? 'searchactive ' : '')\r\n    .concat(size ? `${size} ` : '')\r\n    .concat(validationMessage ? ' invalid ' : '')\r\n    .concat(`${className ?? ''} `);\r\n\r\n  return (\r\n    <SearchFieldWrapper ref={ref}>\r\n      <StyledSearchField id={`${id}_main`} data-testid={`${id}_main`} className={cls} {...rest}>\r\n        {children}\r\n      </StyledSearchField>\r\n    </SearchFieldWrapper>\r\n  );\r\n});\r\n\r\nexport default SearchField;\r\n"],"mappings":";;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAAoE,IAAAK,WAAA,GAAAL,OAAA;AAAA,MAAAM,SAAA;AAAA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAT,wBAAAS,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAW,QAAAnB,CAAA,EAAAE,CAAA,QAAAC,CAAA,GAAAQ,MAAA,CAAAS,IAAA,CAAApB,CAAA,OAAAW,MAAA,CAAAU,qBAAA,QAAAC,CAAA,GAAAX,MAAA,CAAAU,qBAAA,CAAArB,CAAA,GAAAE,CAAA,KAAAoB,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAArB,CAAA,WAAAS,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAE,CAAA,EAAAsB,UAAA,OAAArB,CAAA,CAAAsB,IAAA,CAAAC,KAAA,CAAAvB,CAAA,EAAAmB,CAAA,YAAAnB,CAAA;AAAA,SAAAwB,cAAA3B,CAAA,aAAAE,CAAA,MAAAA,CAAA,GAAA0B,SAAA,CAAAC,MAAA,EAAA3B,CAAA,UAAAC,CAAA,WAAAyB,SAAA,CAAA1B,CAAA,IAAA0B,SAAA,CAAA1B,CAAA,QAAAA,CAAA,OAAAiB,OAAA,CAAAR,MAAA,CAAAR,CAAA,OAAA2B,OAAA,WAAA5B,CAAA,QAAA6B,gBAAA,CAAA1B,OAAA,EAAAL,CAAA,EAAAE,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAS,MAAA,CAAAqB,yBAAA,GAAArB,MAAA,CAAAsB,gBAAA,CAAAjC,CAAA,EAAAW,MAAA,CAAAqB,yBAAA,CAAA7B,CAAA,KAAAgB,OAAA,CAAAR,MAAA,CAAAR,CAAA,GAAA2B,OAAA,WAAA5B,CAAA,IAAAS,MAAA,CAAAC,cAAA,CAAAZ,CAAA,EAAAE,CAAA,EAAAS,MAAA,CAAAE,wBAAA,CAAAV,CAAA,EAAAD,CAAA,iBAAAF,CAAA;AAG7D,MAAMkC,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAAG;AAC5C;AACA,MAAMC,kBAAW;AACjB;AACA,CAAC;AAEM,MAAMC,iBAAiB,GAAAJ,OAAA,CAAAI,iBAAA,GAAGH,yBAAM,CAACC,GAA2C;AACnF;AACA;AACA,gCAAgCG,KAAK,IAAIC,aAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAE,QAAQ;EAAEC,cAAc,EAAC;AAAS,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAC/H;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBL,KAAK,IAAIC,aAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAE,YAAY;EAAEC,cAAc,EAAE;AAAS,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAC1H;AACA,IAAIL,KAAK,IAAI,IAAAM,yBAAiB,EAACC,yBAAkB,CAACC,OAAO,EAAEP,aAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAAEC,cAAc,EAAC;AAAS,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AAC/I;AACA;AACA;AACA;AACA;AACA,MAAML,KAAK,IAAI,IAAAM,yBAAiB,EAACC,yBAAkB,CAACE,MAAM,EAAER,aAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAAEC,cAAc,EAAC;AAAQ,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AAC/I;AACA;AACA,IAAIK,kBAAW,CAACC,MAAM;AACtB,MAAMX,KAAK,IAAI,IAAAY,yBAAiB,EAACL,yBAAkB,CAACC,OAAO,EAAEP,aAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAAEC,cAAc,EAAC;AAAS,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AACjJ;AACA;AACA;AACA;AACA;AACA,QAAQL,KAAK,IAAI,IAAAY,yBAAiB,EAACL,yBAAkB,CAACE,MAAM,EAAER,aAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAAEC,cAAc,EAAC;AAAQ,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AACjJ;AACA;AACA;AACA;AACA,MAAML,KAAK,IAAI,IAAAM,yBAAiB,EAACC,yBAAkB,CAACC,OAAO,EAAEP,aAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAAEC,cAAc,EAAC;AAAS,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AACjJ;AACA;AACA;AACA;AACA,QAAQL,KAAK,IAAI,IAAAM,yBAAiB,EAACC,yBAAkB,CAACE,MAAM,EAAER,aAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAAEC,cAAc,EAAC;AAAQ,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AACjJ;AACA;AACA;AACA;AACA,MAAML,KAAK,IAAI,IAAAY,yBAAiB,EAACL,yBAAkB,CAACC,OAAO,EAAEP,aAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAAEC,cAAc,EAAC;AAAS,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AACjJ;AACA;AACA;AACA,QAAQL,KAAK,IAAI,IAAAY,yBAAiB,EAACL,yBAAkB,CAACE,MAAM,EAAER,aAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAAEC,cAAc,EAAC;AAAQ,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AACjJ;AACA;AACA;AACA;AACA,kCAAkCL,KAAK,IAAIC,aAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,QAAQ;EAAEU,KAAK,EAAC;AAAO,CAAC,EAAEb,KAAK,CAACK,KAAK,CAAC;AACrH;AACA;AACA;AACA,kCAAkCL,KAAK,IAAIC,aAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,QAAQ;EAAEU,KAAK,EAAC;AAAQ,CAAC,EAAEb,KAAK,CAACK,KAAK,CAAC;AACtH;AACA;AACA;AACA,aAAaL,KAAK,IAAIC,aAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAACC,cAAc,EAAC;AAAQ,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC;AACvG;AACA;AACA;AACA;AACA,kCAAkCL,KAAK,IAAIC,aAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,QAAQ;EAAEC,cAAc,EAAC;AAAU,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC;AACjI;AACA;AACA;AACA,kCAAkCL,KAAK,IAAIC,aAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,QAAQ;EAAEU,KAAK,EAAC;AAAU,CAAC,EAAEb,KAAK,CAACK,KAAK,CAAC;AACxH;AACA;AACA;AACA,CAAC;AAWD,MAAMS,WAAW,gBAAGhE,KAAK,CAACiE,UAAU,CAAkC,CAAAC,IAAA,EAAsFC,GAAG,KAAK;EAAA,IAA7F;MAAEC,EAAE;MAAEC,UAAU;MAAEC,QAAQ;MAAEC,iBAAiB;MAAEC,QAAQ;MAAEC,IAAI;MAAEC;IAAmB,CAAC,GAAAR,IAAA;IAANS,IAAI,OAAAC,yBAAA,CAAA7D,OAAA,EAAAmD,IAAA,EAAA1D,SAAA;EACtJ,MAAMqE,GAAG,GAAG,CAACP,QAAQ,GAAG,WAAW,GAAG,EAAE,EACrCQ,MAAM,CAACT,UAAU,KAAK,EAAE,GAAG,eAAe,GAAG,EAAE,CAAC,CAChDS,MAAM,CAACL,IAAI,GAAG,GAAGA,IAAI,GAAG,GAAG,EAAE,CAAC,CAC9BK,MAAM,CAACP,iBAAiB,GAAG,WAAW,GAAG,EAAE,CAAC,CAC5CO,MAAM,CAAC,GAAGJ,SAAS,IAAI,EAAE,GAAG,CAAC;EAEhC,oBACE,IAAAnE,WAAA,CAAAwE,GAAA,EAACnC,kBAAkB;IAACuB,GAAG,EAAEA,GAAI;IAAAK,QAAA,eAC3B,IAAAjE,WAAA,CAAAwE,GAAA,EAAC9B,iBAAiB,EAAAZ,aAAA,CAAAA,aAAA;MAAC+B,EAAE,EAAE,GAAGA,EAAE,OAAQ;MAAC,eAAa,GAAGA,EAAE,OAAQ;MAACM,SAAS,EAAEG;IAAI,GAAKF,IAAI;MAAAH,QAAA,EACrFA;IAAQ,EACQ;EAAC,CACF,CAAC;AAEzB,CAAC,CAAC;AAACR,WAAA,CAAAgB,SAAA;EAtBDZ,EAAE,EAAAa,UAAA,CAAAlE,OAAA,CAAAmE,MAAA,CAAAC,UAAA;EACFd,UAAU,EAAAY,UAAA,CAAAlE,OAAA,CAAAmE,MAAA;EACVZ,QAAQ,EAAAW,UAAA,CAAAlE,OAAA,CAAAqE,IAAA;EACRb,iBAAiB,EAAAU,UAAA,CAAAlE,OAAA,CAAAmE,MAAA;EACjBV,QAAQ,EAAAS,UAAA,CAAAlE,OAAA,CAAAsE,GAAA,CAAAF;AAAA;AAAA,IAAAG,QAAA,GAAAzC,OAAA,CAAA9B,OAAA,GAoBKiD,WAAW","ignoreList":[]}

package/dist/InputFields/components/SearchField.js

@@ -17,7 +17,10 @@ export const SearchFieldWrapper = styled.div`
 export const StyledSearchField = styled.div`
   display: flex;
   flex-direction: row;
-  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};
+  box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'default'
+}, props.theme)};
   margin-bottom: 4px;
   box-sizing: border-box;
   border-radius: 56px;
@@ -25,66 +28,108 @@ export const StyledSearchField = styled.div`
   position: relative;
   height: 48px;
   appearance: none;
-  background-color: ${props => COLORS.getColor('white', props.theme)};
+  background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
 
-  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
 
   padding: 0 !important;
   width: 100%;
 
   &::placeholder {
-    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}
+    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   }
 
   ${BREAKPOINTS.MEDIUM} {
-    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
 
     height: 56px;
     padding: 0 4px !important;
 
     &::placeholder {
-      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}
+      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 
   &.small {
-    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
     height: 48px;
     padding: 0 !important;
 
     &::placeholder {
-      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}
+      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 
   &.medium {
-    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
     height: 56px;
 
     &::placeholder {
-      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}
+      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 
   &:hover {
-    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'hover'
+}, props.theme)};
   }
 
   &:focus-within {
-    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'active'
+}, props.theme)};
   }
 
   div {
-    color: ${props => COLORS.getColor('neutral_600', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
     background-color: transparent;
   }
 
   &.invalid {
-    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_400', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'critical'
+}, props.theme)};
   }
 
   &.disabled {
-    box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_100', props.theme)};
+    box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
     pointer-events: none;
     background-color: transparent !important;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","jsx","_jsx","SearchFieldWrapper","div","StyledSearchField","props","getColor","theme","Regular","Italic","MEDIUM","SearchField","forwardRef","_ref","ref","id","searchTerm","disabled","validationMessage","children","size","className","rest","_objectWithoutProperties","_excluded","cls","concat","_objectSpread","propTypes","_pt","string","isRequired","bool","any"],"sources":["../../../src/InputFields/components/SearchField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';\r\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\r\nimport { Size } from '../../types';\r\n\r\nexport const SearchFieldWrapper = styled.div`\r\n  &.focus-visible-within {\r\n    ${focusStyles}\r\n  }\r\n`;\r\n\r\nexport const StyledSearchField = styled.div<{ $activeValidationMessage?: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n  margin-bottom: 4px;\r\n  box-sizing: border-box;\r\n  border-radius: 56px;\r\n  align-items: center;\r\n  position: relative;\r\n  height: 48px;\r\n  appearance: none;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n\r\n  padding: 0 !important;\r\n  width: 100%;\r\n\r\n  &::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n\r\n    height: 56px;\r\n    padding: 0 4px !important;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    height: 48px;\r\n    padding: 0 !important;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    height: 56px;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  div {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n    background-color: transparent;\r\n  }\r\n\r\n  &.invalid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_400', props.theme)};\r\n  }\r\n\r\n  &.disabled {\r\n    box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    pointer-events: none;\r\n    background-color: transparent !important;\r\n  }\r\n`;\r\n\r\ntype SeachFieldProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  id: string;\r\n  searchTerm?: string;\r\n  disabled?: boolean;\r\n  validationMessage?: string;\r\n  children: any;\r\n  size?: Size.Small | Size.Medium;\r\n};\r\n\r\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({ id, searchTerm, disabled, validationMessage, children, size, className, ...rest }, ref) => {\r\n  const cls = (disabled ? 'disabled ' : '')\r\n    .concat(searchTerm !== '' ? 'searchactive ' : '')\r\n    .concat(size ? `${size} ` : '')\r\n    .concat(validationMessage ? ' invalid ' : '')\r\n    .concat(`${className ?? ''} `);\r\n\r\n  return (\r\n    <SearchFieldWrapper ref={ref}>\r\n      <StyledSearchField id={`${id}_main`} data-testid={`${id}_main`} className={cls} {...rest}>\r\n        {children}\r\n      </StyledSearchField>\r\n    </SearchFieldWrapper>\r\n  );\r\n});\r\n\r\nexport default SearchField;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchField.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","jsx","_jsx","SearchFieldWrapper","div","StyledSearchField","props","generateToken","componentType","defaultVariant","theme","Regular","Italic","MEDIUM","state","SearchField","forwardRef","_ref","ref","id","searchTerm","disabled","validationMessage","children","size","className","rest","_objectWithoutProperties","_excluded","cls","concat","_objectSpread","propTypes","_pt","string","isRequired","bool","any"],"sources":["../../../src/InputFields/components/SearchField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';\r\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\r\nimport { Size } from '../../types';\r\n\r\nexport const SearchFieldWrapper = styled.div`\r\n  &.focus-visible-within {\r\n    ${focusStyles}\r\n  }\r\n`;\r\n\r\nexport const StyledSearchField = styled.div<{ $activeValidationMessage?: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType: 'border', defaultVariant:'default'}, props.theme)};\r\n  margin-bottom: 4px;\r\n  box-sizing: border-box;\r\n  border-radius: 56px;\r\n  align-items: center;\r\n  position: relative;\r\n  height: 48px;\r\n  appearance: none;\r\n  background-color: ${props => COLORS.generateToken({componentType: 'bg-surface', defaultVariant: 'default'}, props.theme)};\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n\r\n  padding: 0 !important;\r\n  width: 100%;\r\n\r\n  &::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n\r\n    height: 56px;\r\n    padding: 0 4px !important;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n    height: 48px;\r\n    padding: 0 !important;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n    height: 56px;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n    }\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'hover'}, props.theme)};\r\n  }\r\n\r\n  &:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', state:'active'}, props.theme)};\r\n  }\r\n\r\n  div {\r\n    color: ${props => COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme)};\r\n    background-color: transparent;\r\n  }\r\n\r\n  &.invalid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'critical'}, props.theme)};\r\n  }\r\n\r\n  &.disabled {\r\n    box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n    pointer-events: none;\r\n    background-color: transparent !important;\r\n  }\r\n`;\r\n\r\ntype SeachFieldProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  id: string;\r\n  searchTerm?: string;\r\n  disabled?: boolean;\r\n  validationMessage?: string;\r\n  children: any;\r\n  size?: Size.Small | Size.Medium;\r\n};\r\n\r\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({ id, searchTerm, disabled, validationMessage, children, size, className, ...rest }, ref) => {\r\n  const cls = (disabled ? 'disabled ' : '')\r\n    .concat(searchTerm !== '' ? 'searchactive ' : '')\r\n    .concat(size ? `${size} ` : '')\r\n    .concat(validationMessage ? ' invalid ' : '')\r\n    .concat(`${className ?? ''} `);\r\n\r\n  return (\r\n    <SearchFieldWrapper ref={ref}>\r\n      <StyledSearchField id={`${id}_main`} data-testid={`${id}_main`} className={cls} {...rest}>\r\n        {children}\r\n      </StyledSearchField>\r\n    </SearchFieldWrapper>\r\n  );\r\n});\r\n\r\nexport default SearchField;\r\n"],"mappings":"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","ignoreList":[]}