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

package/dist/InputFields/components/SearchField.cjs

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

package/dist/InputFields/components/SearchField.js

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

package/dist/InputFields/styling.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.readOnlyState = exports.activeErrorMessageState = exports.Warning = exports.ValidationMessage = exports.StyledIcon = exports.SearchIconWrapper = exports.NoteMessage = exports.InputWrapper = exports.InputFieldStyling = exports.ErrorMessage = exports.AutofilledMessage = void 0;
+exports.readOnlyState = 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 _TooltipStyles = require("../Tooltips/TooltipStyles");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styles = require("../styles");
@@ -21,27 +21,15 @@ const InputWrapper = exports.InputWrapper = _styledComponents.default.div`
 
 `;
 const readOnlyState = exports.readOnlyState = (0, _styledComponents.css)`
-  background-color: ${props => _styles.COLORS.generateToken({
-  componentType: 'bg-surface',
-  state: 'disabled'
-}, props.theme)};
-  box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.generateToken({
-  componentType: 'border',
-  defaultVariant: 'default'
-}, props.theme)} !important;
-  color: ${props => _styles.COLORS.generateToken({
-  componentType: 'text',
-  defaultVariant: 'subtle'
-}, props.theme)} !important;
+  background-color: ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+  box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.getColor('neutral_300', props.theme)} !important;
+  color: ${props => _styles.COLORS.getColor('neutral_600', props.theme)} !important;
   pointer-events: none;
   outline: none;
   cursor: not-allowed;
 `;
 const activeErrorMessageState = exports.activeErrorMessageState = (0, _styledComponents.css)`
-  box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
-  componentType: 'border',
-  defaultVariant: 'critical'
-}, props.theme)};
+  box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.getColor('critical_400', props.theme)};
 `;
 const InputFieldStyling = exports.InputFieldStyling = _styledComponents.default.input`
   height: 48px;
@@ -54,22 +42,10 @@ const InputFieldStyling = exports.InputFieldStyling = _styledComponents.default.
   ${props => props.$withoutBorder ? `-webkit-box-shadow: none;
       -moz-box-shadow: none;
       box-shadow: none;
-      ` : `-webkit-box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.generateToken({
-  componentType: 'border',
-  defaultVariant: 'default'
-}, props.theme)};
-      -moz-box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.generateToken({
-  componentType: 'border',
-  defaultVariant: 'default'
-}, props.theme)};
-      box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.generateToken({
-  componentType: 'border',
-  defaultVariant: 'default'
-}, props.theme)};`}
-  background-color: ${props => _styles.COLORS.generateToken({
-  componentType: 'bg-surface',
-  defaultVariant: 'default'
-}, props.theme)};
+      ` : `-webkit-box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.getColor('neutral_400', props.theme)};
+      -moz-box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.getColor('neutral_400', props.theme)};
+      box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.getColor('neutral_400', props.theme)};`}
+  background-color: #fff;
   box-sizing: border-box;
   padding: 0 ${props => 16 + (props.$extraRightPadding ?? 0)}px 0 16px !important;
   text-overflow: ellipsis;
@@ -81,10 +57,7 @@ const InputFieldStyling = exports.InputFieldStyling = _styledComponents.default.
   font-size: 16px;
 
   &::placeholder {
-    ${props => (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.generateToken({
-  componentType: 'text',
-  defaultVariant: 'subtle'
-}, props.theme))}
+    ${props => (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme))}
   }
 
   ${_styles.BREAKPOINTS.MEDIUM} {
@@ -94,10 +67,7 @@ const InputFieldStyling = exports.InputFieldStyling = _styledComponents.default.
     padding: 0 16px !important;
 
     &::placeholder {
-      ${props => (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.generateToken({
-  componentType: 'text',
-  defaultVariant: 'subtle'
-}, props.theme))}
+      ${props => (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme))}
     }
   }
 
@@ -116,9 +86,7 @@ const InputFieldStyling = exports.InputFieldStyling = _styledComponents.default.
     }
   }
 
-  color: ${props => _styles.COLORS.generateToken({
-  componentType: 'text'
-}, props.theme)} !important;
+  color: ${props => _styles.COLORS.getColor('black', props.theme)} !important;
 
   ${props => props.$activeErrorMessage ? activeErrorMessageState : ''}
 
@@ -127,25 +95,15 @@ const InputFieldStyling = exports.InputFieldStyling = _styledComponents.default.
   }
 
   &:disabled {
-    border: 1px solid ${props => _styles.COLORS.generateToken({
-  componentType: 'border',
-  state: 'disabled'
-}, props.theme)};
+    border: 1px solid ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
     pointer-events: none;
     box-shadow: none !important;
     outline: none;
     cursor: not-allowed;
-    color: ${props => _styles.COLORS.generateToken({
-  componentType: 'text',
-  state: 'disabled'
-}, props.theme)} !important;
+    color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)} !important;
   }
-
   &:focus:not(.focus-visible) {
-    box-shadow: inset 0px 0px 0px 2px ${props => _styles.COLORS.generateToken({
-  componentType: 'border',
-  defaultVariant: 'critical'
-}, props.theme)};
+    box-shadow: inset 0px 0px 0px 2px ${props => _styles.COLORS.getColor('primary_800', props.theme)};
   }
 
   &.focus-visible {
@@ -153,16 +111,10 @@ const InputFieldStyling = exports.InputFieldStyling = _styledComponents.default.
   }
 
   &.invalid {
-    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
-  componentType: 'border',
-  defaultVariant: 'critical'
-}, props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.getColor('critical_400', props.theme)};
   }
   &.valid {
-    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
-  componentType: 'border',
-  defaultVariant: 'positive'
-}, props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.getColor('correct_500', props.theme)};
   }
 
   &:not(.placeholder) {
@@ -170,17 +122,11 @@ const InputFieldStyling = exports.InputFieldStyling = _styledComponents.default.
   }
 
   &:hover {
-    box-shadow: inset 0px 0px 0px 2px ${props => _styles.COLORS.generateToken({
-  componentType: 'border',
-  state: 'hover'
-}, props.theme)};
+    box-shadow: inset 0px 0px 0px 2px ${props => _styles.COLORS.getColor('primary_700', props.theme)};
   }
 
   &.active {
-    box-shadow: inset 0px 0px 0px 2px ${props => _styles.COLORS.generateToken({
-  componentType: 'border',
-  state: 'active'
-}, props.theme)};
+    box-shadow: inset 0px 0px 0px 2px ${props => _styles.COLORS.getColor('primary_800', props.theme)};
   }
 
   &.show-checkmark.valid {
@@ -191,6 +137,22 @@ const InputFieldStyling = exports.InputFieldStyling = _styledComponents.default.
     background-image: none;
   }
 `;
+const ValidationStyling = exports.ValidationStyling = (0, _styledComponents.css)`
+  &.error-msg {
+    ${props => (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+    text-align: center;
+    font-weight: 400;
+    box-sizing: border-box;
+  }
+
+  &.error-msg {
+    padding-top: 8px;
+    padding-bottom: 0;
+    ${(0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, '#e76468')}
+    font-weight: 700;
+    line-height: 15px;
+  }
+`;
 const Warning = exports.Warning = _styledComponents.default.div`
   display: flex;
   align-items: center;
@@ -235,37 +197,19 @@ const Warning = exports.Warning = _styledComponents.default.div`
   }
 `;
 const ErrorMessage = exports.ErrorMessage = (0, _styledComponents.default)(Warning)`
-  color: ${props => _styles.COLORS.generateToken({
-  componentType: 'text',
-  defaultVariant: 'critical'
-}, props.theme)};
+  color: ${props => _styles.COLORS.getColor('critical_500', props.theme)};
 `;
 const getStateColor = (type, theme) => {
-  if (type === _types.States.Valid) return _styles.COLORS.generateToken({
-    componentType: 'text',
-    defaultVariant: 'positive'
-  }, theme);else if (type === _types.States.Default) return _styles.COLORS.generateToken({
-    componentType: 'text',
-    defaultVariant: 'default'
-  }, theme);else return _styles.COLORS.generateToken({
-    componentType: 'text',
-    defaultVariant: 'critical'
-  }, theme);
+  if (type === _types.States.Valid) return _styles.COLORS.getColor('correct_500', theme);else if (type === _types.States.Default) return _styles.COLORS.getColor('neutral_500', theme);else return _styles.COLORS.getColor('critical_500', theme);
 };
 const ValidationMessage = exports.ValidationMessage = (0, _styledComponents.default)(Warning)`
   color: ${props => getStateColor(props.type, props.theme)};
 `;
 const NoteMessage = exports.NoteMessage = (0, _styledComponents.default)(Warning)`
-  color: ${props => _styles.COLORS.generateToken({
-  componentType: 'text',
-  defaultVariant: 'default'
-}, props.theme)};
+  color: ${props => _styles.COLORS.getColor('neutral_500', props.theme)};
 `;
 const AutofilledMessage = exports.AutofilledMessage = (0, _styledComponents.default)(Warning)`
-  color: ${props => _styles.COLORS.generateToken({
-  componentType: 'text',
-  defaultVariant: 'subtle'
-}, props.theme)};
+  color: ${props => _styles.COLORS.getColor('neutral_600', props.theme)};
 `;
 const StyledIcon = exports.StyledIcon = _styledComponents.default.div`
   border-radius: 50%;