@laerdal/life-react-components 3.5.1-dev.16 → 3.5.1-dev.18

package/dist/InputFields/Textarea.js

@@ -25,7 +25,7 @@ import { SystemIcons } from '../icons';
 /**
  * Import third-party libraries.
  */
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { ComponentMStyling, ComponentTextStyle } from '../styles';
 import { useFocusVisibleRef } from "../common";
 
@@ -35,9 +35,41 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var TextareaWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  ", "\n"])), function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 });
-var TextArea = styled.textarea(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: block;\n  background: ", ";\n  border-radius: 4px;\n  outline: none;\n  margin-bottom: 4px;\n  padding: 16px;\n  border: none;\n  box-shadow: inset 0 0 0 1px ", ";\n\n  resize: ", ";\n\n  ", "\n  &.small {\n    ", "\n    width: 304px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    &::placeholder {\n      ", "\n    }\n    width: 344px;\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:read-only:not(:disabled) {\n    ", "\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    border: 1px solid ", ";\n    box-shadow: none !important;\n    color: ", " !important;\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  &::placeholder {\n    ", "\n  }\n"])), COLORS.white, COLORS.neutral_400, function (props) {
+var TextArea = styled.textarea(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: block;\n  background: ", ";\n  border-radius: 4px;\n  outline: none;\n  margin-bottom: 4px;\n  padding: 16px;\n  border: none;\n  box-shadow: inset 0 0 0 1px ", ";\n\n  resize: ", ";\n\n  ", "\n  &.small {\n    ", "\n    width: 304px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    &::placeholder {\n      ", "\n    }\n    width: 344px;\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:read-only:not(:disabled) {\n    ", "\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    border: 1px solid ", ";\n    box-shadow: none !important;\n    color: ", " !important;\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  &::placeholder {\n    ", "\n  }\n"])), function (props) {
+  return COLORS.getColor('white', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_400', props.theme);
+}, function (props) {
   return props.autoHeight ? 'none' : '';
-}, ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), COLORS.primary_800, focusStyles, COLORS.critical_500, COLORS.correct_500, COLORS.primary_700, COLORS.primary_800, readOnlyState, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500));
+}, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme));
+}, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme));
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, focusStyles, function (props) {
+  return COLORS.getColor('critical_500', props.theme);
+}, function (props) {
+  return COLORS.getColor('correct_500', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_700', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, readOnlyState, function (props) {
+  return COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme));
+});
 var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var id = _ref.id,
     placeholder = _ref.placeholder,
@@ -55,6 +87,7 @@ var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     dataTestId = _ref.dataTestId,
     rest = _objectWithoutProperties(_ref, _excluded);
   var elementRef = useFocusVisibleRef();
+  var theme = useTheme();
   React.useImperativeHandle(ref, function () {
     return elementRef.current;
   }, [elementRef]);
@@ -78,9 +111,9 @@ var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: size || '',
       type: state !== null && state !== void 0 ? state : States.Invalid,
       children: [state === States.Valid ? /*#__PURE__*/_jsx(SystemIcons.CheckMark, {
-        color: COLORS.correct_400
+        color: COLORS.getColor('correct_400', theme)
       }) : /*#__PURE__*/_jsx(SystemIcons.TechnicalWarning, {
-        color: COLORS.critical_400
+        color: COLORS.getColor('critical_400', theme)
       }), /*#__PURE__*/_jsx("span", {
         children: validationMessage
       })]

package/dist/InputFields/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":["React","COLORS","ComponentSStyling","focusStyles","NoteMessage","readOnlyState","ValidationMessage","States","SystemIcons","styled","ComponentMStyling","ComponentTextStyle","useFocusVisibleRef","jsx","_jsx","jsxs","_jsxs","TextareaWrapper","div","_templateObject","_taggedTemplateLiteral","props","margin","concat","TextArea","textarea","_templateObject2","white","neutral_400","autoHeight","Regular","black","Italic","neutral_500","primary_800","critical_500","correct_500","primary_700","neutral_100","neutral_300","Textarea","forwardRef","_ref","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","className","dataTestId","rest","_objectWithoutProperties","_excluded","elementRef","useImperativeHandle","current","cls","Invalid","children","_objectSpread","undefined","e","_e$target","target","type","Valid","CheckMark","color","correct_400","TechnicalWarning","critical_400","icon","message"],"sources":["../../src/InputFields/Textarea.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {COLORS, ComponentSStyling, focusStyles} from '../styles';\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from './styling';\r\nimport { States } from '../types';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport { SystemIcons } from '../icons';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\r\nimport { TextareaProps, TextFieldNote } from './types';\r\nimport {useFocusVisibleRef} from \"../common\";\r\n\r\n// Add component-specific styles.\r\nconst TextareaWrapper = styled.div<{ margin?: string }>`\r\n  width: 100%;\r\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\r\n`;\r\nconst TextArea = styled.textarea<{ autoHeight?: boolean }>`\r\n  display: block;\r\n  background: ${COLORS.white};\r\n  border-radius: 4px;\r\n  outline: none;\r\n  margin-bottom: 4px;\r\n  padding: 16px;\r\n  border: none;\r\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\r\n\r\n  resize: ${(props) => (props.autoHeight ? 'none' : '')};\r\n\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    width: 304px;\r\n\r\n    &::placeholder {\r\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    &::placeholder {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n    }\r\n    width: 344px;\r\n  }\r\n\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\r\n  }\r\n\r\n  &.focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.invalid {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\r\n  }\r\n\r\n  &.valid {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\r\n  }\r\n\r\n  &:read-only:not(:disabled) {\r\n    ${readOnlyState}\r\n  }\r\n\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n    border: 1px solid ${COLORS.neutral_100};\r\n    box-shadow: none !important;\r\n    color: ${COLORS.neutral_300} !important;\r\n\r\n    &::placeholder {\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n\r\n  &::placeholder {\r\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n  }\r\n`;\r\n\r\nconst Textarea = React.forwardRef<any, TextareaProps>(({\r\n  id,\r\n  placeholder,\r\n  state,\r\n  value,\r\n  size,\r\n  disabled,\r\n  validationMessage,\r\n  onChange,\r\n  margin,\r\n  autoHeight,\r\n  note,\r\n  required,\r\n  className,\r\n  dataTestId,\r\n  ...rest\r\n}: TextareaProps, ref) => {\r\n\r\n  const elementRef = useFocusVisibleRef();\r\n\r\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\r\n  return (\r\n    <TextareaWrapper>\r\n      <TextArea\r\n        id={id}\r\n        data-testid={dataTestId}\r\n        ref={elementRef}\r\n        value={value}\r\n        placeholder={disabled ? undefined : placeholder}\r\n        autoHeight={autoHeight}\r\n        className={cls}\r\n        disabled={disabled}\r\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n        required={required}\r\n        {...rest}\r\n      />\r\n      {validationMessage && (\r\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n          {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.correct_400} /> : <SystemIcons.TechnicalWarning color={COLORS.critical_400} />}\r\n          <span>{validationMessage}</span>\r\n        </ValidationMessage>\r\n      )}\r\n      {note && !disabled && (\r\n        <NoteMessage className={size}>\r\n          {note.icon}\r\n          <span>{note.message}</span>\r\n        </NoteMessage>\r\n      )}\r\n    </TextareaWrapper>\r\n  );\r\n});\r\n\r\nexport default Textarea;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Textarea.js","names":["React","COLORS","ComponentSStyling","focusStyles","NoteMessage","readOnlyState","ValidationMessage","States","SystemIcons","styled","useTheme","ComponentMStyling","ComponentTextStyle","useFocusVisibleRef","jsx","_jsx","jsxs","_jsxs","TextareaWrapper","div","_templateObject","_taggedTemplateLiteral","props","margin","concat","TextArea","textarea","_templateObject2","getColor","theme","autoHeight","Regular","Italic","Textarea","forwardRef","_ref","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","className","dataTestId","rest","_objectWithoutProperties","_excluded","elementRef","useImperativeHandle","current","cls","Invalid","children","_objectSpread","undefined","e","_e$target","target","type","Valid","CheckMark","color","TechnicalWarning","icon","message"],"sources":["../../src/InputFields/Textarea.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {COLORS, ComponentSStyling, focusStyles} from '../styles';\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from './styling';\r\nimport { States } from '../types';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport { SystemIcons } from '../icons';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\r\nimport { TextareaProps, TextFieldNote } from './types';\r\nimport {useFocusVisibleRef} from \"../common\";\r\n\r\n// Add component-specific styles.\r\nconst TextareaWrapper = styled.div<{ margin?: string }>`\r\n  width: 100%;\r\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\r\n`;\r\nconst TextArea = styled.textarea<{ autoHeight?: boolean }>`\r\n  display: block;\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  border-radius: 4px;\r\n  outline: none;\r\n  margin-bottom: 4px;\r\n  padding: 16px;\r\n  border: none;\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n\r\n  resize: ${(props) => (props.autoHeight ? 'none' : '')};\r\n\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    width: 304px;\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    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n    width: 344px;\r\n  }\r\n\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &.focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.invalid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_500', props.theme)};\r\n  }\r\n\r\n  &.valid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('correct_500', props.theme)};\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &:read-only:not(:disabled) {\r\n    ${readOnlyState}\r\n  }\r\n\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n    border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    box-shadow: none !important;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n\r\n    &::placeholder {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &::placeholder {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n`;\r\n\r\nconst Textarea = React.forwardRef<any, TextareaProps>(({\r\n  id,\r\n  placeholder,\r\n  state,\r\n  value,\r\n  size,\r\n  disabled,\r\n  validationMessage,\r\n  onChange,\r\n  margin,\r\n  autoHeight,\r\n  note,\r\n  required,\r\n  className,\r\n  dataTestId,\r\n  ...rest\r\n}: TextareaProps, ref) => {\r\n\r\n  const elementRef = useFocusVisibleRef();\r\n  const theme = useTheme();\r\n\r\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\r\n  return (\r\n    <TextareaWrapper>\r\n      <TextArea\r\n        id={id}\r\n        data-testid={dataTestId}\r\n        ref={elementRef}\r\n        value={value}\r\n        placeholder={disabled ? undefined : placeholder}\r\n        autoHeight={autoHeight}\r\n        className={cls}\r\n        disabled={disabled}\r\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n        required={required}\r\n        {...rest}\r\n      />\r\n      {validationMessage && (\r\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n          {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.getColor('correct_400', theme)} /> : <SystemIcons.TechnicalWarning color={COLORS.getColor('critical_400', theme)} />}\r\n          <span>{validationMessage}</span>\r\n        </ValidationMessage>\r\n      )}\r\n      {note && !disabled && (\r\n        <NoteMessage className={size}>\r\n          {note.icon}\r\n          <span>{note.message}</span>\r\n        </NoteMessage>\r\n      )}\r\n    </TextareaWrapper>\r\n  );\r\n});\r\n\r\nexport default Textarea;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/components/SearchBarInput.cjs

@@ -21,7 +21,21 @@ var Search = _styledComponents["default"].input.attrs(function () {
   return {
     type: 'search'
   };
-})(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  appearance: none;\n  width: calc(100% - 96px);\n\n  /* To prevent browser putting its own cross inside the search bar */\n\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ", "\n  }\n\n  height: 32px;\n  border-width: 0;\n  margin-left: 48px;\n  outline: none;\n\n  ", "\n  ::placeholder {\n    ", "\n  }\n\n  ", " {\n    ::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    margin-left: 44px;\n\n    ::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    margin-left: 48px;\n    ", "\n    \n    ::placeholder {\n      ", "\n    }\n  }\n\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n"])), (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500), (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_600), _index.BREAKPOINTS.MEDIUM, (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_600), (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_600), (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_600));
+})(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  appearance: none;\n  width: calc(100% - 96px);\n\n  /* To prevent browser putting its own cross inside the search bar */\n\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ", "\n  }\n\n  height: 32px;\n  border-width: 0;\n  margin-left: 48px;\n  outline: none;\n\n  ", "\n  ::placeholder {\n    ", "\n  }\n\n  ", " {\n    ::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    margin-left: 44px;\n\n    ::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    margin-left: 48px;\n    ", "\n    \n    ::placeholder {\n      ", "\n    }\n  }\n\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n"])), function (props) {
+  return (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_500', props.theme));
+}, function (props) {
+  return (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.getColor('black', props.theme));
+}, function (props) {
+  return (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_600', props.theme));
+}, _index.BREAKPOINTS.MEDIUM, function (props) {
+  return (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_600', props.theme));
+}, function (props) {
+  return (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_600', props.theme));
+}, function (props) {
+  return (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.getColor('black', props.theme));
+}, function (props) {
+  return (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_600', props.theme));
+});
 exports.Search = Search;
 var SearchBarInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var id = props.id,

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBarInput.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_index","_styles","_common","_jsxRuntime","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Search","styled","input","attrs","type","_taggedTemplateLiteral2","ComponentSStyling","ComponentTextStyle","Italic","COLORS","neutral_500","Regular","black","neutral_600","BREAKPOINTS","MEDIUM","ComponentMStyling","exports","SearchBarInput","forwardRef","props","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    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\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  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  ::placeholder {\r\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ::placeholder {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    margin-left: 44px;\r\n\r\n    ::placeholder {\r\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    margin-left: 48px;\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    \r\n    ::placeholder {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\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","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Search","styled","input","attrs","type","_taggedTemplateLiteral2","props","ComponentSStyling","ComponentTextStyle","Italic","COLORS","getColor","theme","Regular","BREAKPOINTS","MEDIUM","ComponentMStyling","exports","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":[]}

package/dist/InputFields/components/SearchBarInput.js

@@ -11,7 +11,21 @@ export var Search = styled.input.attrs(function () {
   return {
     type: 'search'
   };
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  appearance: none;\n  width: calc(100% - 96px);\n\n  /* To prevent browser putting its own cross inside the search bar */\n\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ", "\n  }\n\n  height: 32px;\n  border-width: 0;\n  margin-left: 48px;\n  outline: none;\n\n  ", "\n  ::placeholder {\n    ", "\n  }\n\n  ", " {\n    ::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    margin-left: 44px;\n\n    ::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    margin-left: 48px;\n    ", "\n    \n    ::placeholder {\n      ", "\n    }\n  }\n\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n"])), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600));
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  appearance: none;\n  width: calc(100% - 96px);\n\n  /* To prevent browser putting its own cross inside the search bar */\n\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ", "\n  }\n\n  height: 32px;\n  border-width: 0;\n  margin-left: 48px;\n  outline: none;\n\n  ", "\n  ::placeholder {\n    ", "\n  }\n\n  ", " {\n    ::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    margin-left: 44px;\n\n    ::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    margin-left: 48px;\n    ", "\n    \n    ::placeholder {\n      ", "\n    }\n  }\n\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n"])), function (props) {
+  return ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme));
+}, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme));
+}, BREAKPOINTS.MEDIUM, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme));
+}, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme));
+}, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme));
+});
 var SearchBarInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var id = props.id,
     searchTerm = props.searchTerm,

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","_templateObject","_taggedTemplateLiteral","Italic","neutral_500","Regular","black","neutral_600","MEDIUM","SearchBarInput","forwardRef","props","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","e","key","preventDefault","stopPropagation","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    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\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  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  ::placeholder {\r\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ::placeholder {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    margin-left: 44px;\r\n\r\n    ::placeholder {\r\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    margin-left: 48px;\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    \r\n    ::placeholder {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\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.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","useFocusVisibleRef","jsx","_jsx","Search","input","attrs","type","_templateObject","_taggedTemplateLiteral","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":"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","ignoreList":[]}

package/dist/InputFields/components/SearchField.cjs

@@ -23,7 +23,37 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SearchFieldWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  &.focus-visible-within {\n    ", "\n  }\n"])), _index.focusStyles);
 exports.SearchFieldWrapper = SearchFieldWrapper;
-var StyledSearchField = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ", ";\n  margin-bottom: 4px;\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ", ";\n\n  ", "\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ", "\n  }\n\n  ", " {\n    ", "\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    height: 56px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  div {\n    color: ", ";\n    background-color: transparent;\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ", ";\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n"])), _index.COLORS.neutral_400, _index.COLORS.white, (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500), _index.BREAKPOINTS.MEDIUM, (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500), (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500), (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500), _index.COLORS.primary_800, _index.COLORS.primary_800, _index.COLORS.neutral_600, _index.COLORS.critical_400, _index.COLORS.neutral_100);
+var StyledSearchField = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ", ";\n  margin-bottom: 4px;\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ", ";\n\n  ", "\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ", "\n  }\n\n  ", " {\n    ", "\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    height: 56px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  div {\n    color: ", ";\n    background-color: transparent;\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ", ";\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n"])), function (props) {
+  return _index.COLORS.getColor('neutral_400', props.theme);
+}, function (props) {
+  return _index.COLORS.getColor('white', props.theme);
+}, function (props) {
+  return (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.getColor('black', props.theme));
+}, function (props) {
+  return (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_500', props.theme));
+}, _index.BREAKPOINTS.MEDIUM, function (props) {
+  return (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.getColor('black', props.theme));
+}, function (props) {
+  return (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_500', props.theme));
+}, function (props) {
+  return (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.getColor('black', props.theme));
+}, function (props) {
+  return (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_500', props.theme));
+}, function (props) {
+  return (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.getColor('black', props.theme));
+}, function (props) {
+  return (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.getColor('neutral_500', props.theme));
+}, function (props) {
+  return _index.COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return _index.COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return _index.COLORS.getColor('neutral_600', props.theme);
+}, function (props) {
+  return _index.COLORS.getColor('critical_400', props.theme);
+}, function (props) {
+  return _index.COLORS.getColor('neutral_100', props.theme);
+});
 exports.StyledSearchField = StyledSearchField;
 var SearchField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var id = _ref.id,

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

@@ -1 +1 @@
-{"version":3,"file":"SearchField.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_index","_styles","_jsxRuntime","_excluded","_templateObject","_templateObject2","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","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","styled","div","_taggedTemplateLiteral2","focusStyles","exports","StyledSearchField","COLORS","neutral_400","white","ComponentSStyling","ComponentTextStyle","Regular","black","Italic","neutral_500","BREAKPOINTS","MEDIUM","ComponentMStyling","primary_800","neutral_600","critical_400","neutral_100","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 ${COLORS.neutral_400};\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: ${COLORS.white};\r\n\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n\r\n  padding: 0 !important;\r\n  width: 100%;\r\n\r\n  ::placeholder {\r\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n\r\n    height: 56px;\r\n    padding: 0 4px !important;\r\n\r\n    &::placeholder {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    height: 48px;\r\n    padding: 0 !important;\r\n\r\n    &::placeholder {\r\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    height: 56px;\r\n\r\n    &::placeholder {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n    }\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\r\n  }\r\n\r\n  &:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\r\n  }\r\n\r\n  div {\r\n    color: ${COLORS.neutral_600};\r\n    background-color: transparent;\r\n  }\r\n\r\n  &.invalid {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\r\n  }\r\n\r\n  &.disabled {\r\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\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,IAAAM,SAAA;AAAA,IAAAC,eAAA,EAAAC,gBAAA;AAAA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAX,wBAAAW,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,gBAAAK,OAAA,CAAAL,CAAA,0BAAAA,CAAA,sBAAAA,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,cAAAR,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,aAAA/B,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,IAAMkC,kBAAkB,GAAGC,4BAAM,CAACC,GAAG,CAAAvC,eAAA,KAAAA,eAAA,OAAAwC,uBAAA,kEAEtCC,kBAAW,CAEhB;AAACC,OAAA,CAAAL,kBAAA,GAAAA,kBAAA;AAEK,IAAMM,iBAAiB,GAAGL,4BAAM,CAACC,GAAG,CAAAtC,gBAAA,KAAAA,gBAAA,OAAAuC,uBAAA,klCAGXI,aAAM,CAACC,WAAW,EAQ5BD,aAAM,CAACE,KAAK,EAE9B,IAAAC,yBAAiB,EAACC,yBAAkB,CAACC,OAAO,EAAEL,aAAM,CAACM,KAAK,CAAC,EAMzD,IAAAH,yBAAiB,EAACC,yBAAkB,CAACG,MAAM,EAAEP,aAAM,CAACQ,WAAW,CAAC,EAGlEC,kBAAW,CAACC,MAAM,EAChB,IAAAC,yBAAiB,EAACP,yBAAkB,CAACC,OAAO,EAAEL,aAAM,CAACM,KAAK,CAAC,EAMzD,IAAAK,yBAAiB,EAACP,yBAAkB,CAACG,MAAM,EAAEP,aAAM,CAACQ,WAAW,CAAC,EAKlE,IAAAL,yBAAiB,EAACC,yBAAkB,CAACC,OAAO,EAAEL,aAAM,CAACM,KAAK,CAAC,EAKzD,IAAAH,yBAAiB,EAACC,yBAAkB,CAACG,MAAM,EAAEP,aAAM,CAACQ,WAAW,CAAC,EAKlE,IAAAG,yBAAiB,EAACP,yBAAkB,CAACC,OAAO,EAAEL,aAAM,CAACM,KAAK,CAAC,EAIzD,IAAAK,yBAAiB,EAACP,yBAAkB,CAACG,MAAM,EAAEP,aAAM,CAACQ,WAAW,CAAC,EAKtCR,aAAM,CAACY,WAAW,EAIlBZ,aAAM,CAACY,WAAW,EAIvCZ,aAAM,CAACa,WAAW,EAKGb,aAAM,CAACc,YAAY,EAInBd,aAAM,CAACe,WAAW,CAInD;AAACjB,OAAA,CAAAC,iBAAA,GAAAA,iBAAA;AAWF,IAAMiB,WAAW,gBAAGrE,KAAK,CAACsE,UAAU,CAAkC,UAAAC,IAAA,EAAsFC,GAAG,EAAK;EAAA,IAA3FC,EAAE,GAAAF,IAAA,CAAFE,EAAE;IAAEC,UAAU,GAAAH,IAAA,CAAVG,UAAU;IAAEC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IAAEC,iBAAiB,GAAAL,IAAA,CAAjBK,iBAAiB;IAAEC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;IAAEC,IAAI,GAAAP,IAAA,CAAJO,IAAI;IAAEC,SAAS,GAAAR,IAAA,CAATQ,SAAS;IAAKC,IAAI,OAAAC,yBAAA,aAAAV,IAAA,EAAA/D,SAAA;EACtJ,IAAM0E,GAAG,GAAG,CAACP,QAAQ,GAAG,WAAW,GAAG,EAAE,EACrCQ,MAAM,CAACT,UAAU,KAAK,EAAE,GAAG,eAAe,GAAG,EAAE,CAAC,CAChDS,MAAM,CAACL,IAAI,MAAAK,MAAA,CAAML,IAAI,SAAM,EAAE,CAAC,CAC9BK,MAAM,CAACP,iBAAiB,GAAG,WAAW,GAAG,EAAE,CAAC,CAC5CO,MAAM,IAAAA,MAAA,CAAIJ,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,MAAG,CAAC;EAEhC,oBACE,IAAAxE,WAAA,CAAA6E,GAAA,EAACtC,kBAAkB;IAAC0B,GAAG,EAAEA,GAAI;IAAAK,QAAA,eAC3B,IAAAtE,WAAA,CAAA6E,GAAA,EAAChC,iBAAiB,EAAAb,aAAA,CAAAA,aAAA;MAACkC,EAAE,KAAAU,MAAA,CAAKV,EAAE,UAAQ;MAAC,kBAAAU,MAAA,CAAgBV,EAAE,UAAQ;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,YAAAC,MAAA,CAAAC,UAAA;EACFd,UAAU,EAAAY,UAAA,YAAAC,MAAA;EACVZ,QAAQ,EAAAW,UAAA,YAAAG,IAAA;EACRb,iBAAiB,EAAAU,UAAA,YAAAC,MAAA;EACjBV,QAAQ,EAAAS,UAAA,YAAAI,GAAA,CAAAF;AAAA;AAAA,IAAAG,QAAA,GAoBKtB,WAAW;AAAAlB,OAAA,cAAAwC,QAAA","ignoreList":[]}
+{"version":3,"file":"SearchField.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_index","_styles","_jsxRuntime","_excluded","_templateObject","_templateObject2","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","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","styled","div","_taggedTemplateLiteral2","focusStyles","exports","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

@@ -12,7 +12,37 @@ import { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styl
 import { ComponentMStyling, ComponentSStyling } from '../../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var SearchFieldWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &.focus-visible-within {\n    ", "\n  }\n"])), focusStyles);
-export var StyledSearchField = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ", ";\n  margin-bottom: 4px;\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ", ";\n\n  ", "\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ", "\n  }\n\n  ", " {\n    ", "\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    height: 56px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  div {\n    color: ", ";\n    background-color: transparent;\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ", ";\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n"])), COLORS.neutral_400, COLORS.white, ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), COLORS.primary_800, COLORS.primary_800, COLORS.neutral_600, COLORS.critical_400, COLORS.neutral_100);
+export var StyledSearchField = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0 0 0 1px ", ";\n  margin-bottom: 4px;\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ", ";\n\n  ", "\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ", "\n  }\n\n  ", " {\n    ", "\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    height: 56px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  div {\n    color: ", ";\n    background-color: transparent;\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ", ";\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n"])), function (props) {
+  return COLORS.getColor('neutral_400', props.theme);
+}, function (props) {
+  return COLORS.getColor('white', props.theme);
+}, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme));
+}, BREAKPOINTS.MEDIUM, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme));
+}, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, function (props) {
+  return ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme));
+}, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
+}, function (props) {
+  return ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme));
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_600', props.theme);
+}, function (props) {
+  return COLORS.getColor('critical_400', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_100', props.theme);
+});
 var SearchField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var id = _ref.id,
     searchTerm = _ref.searchTerm,

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

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","jsx","_jsx","SearchFieldWrapper","div","_templateObject","_taggedTemplateLiteral","StyledSearchField","_templateObject2","neutral_400","white","Regular","black","Italic","neutral_500","MEDIUM","primary_800","neutral_600","critical_400","neutral_100","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 ${COLORS.neutral_400};\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: ${COLORS.white};\r\n\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n\r\n  padding: 0 !important;\r\n  width: 100%;\r\n\r\n  ::placeholder {\r\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n\r\n    height: 56px;\r\n    padding: 0 4px !important;\r\n\r\n    &::placeholder {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    height: 48px;\r\n    padding: 0 !important;\r\n\r\n    &::placeholder {\r\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    height: 56px;\r\n\r\n    &::placeholder {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n    }\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\r\n  }\r\n\r\n  &:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\r\n  }\r\n\r\n  div {\r\n    color: ${COLORS.neutral_600};\r\n    background-color: transparent;\r\n  }\r\n\r\n  &.invalid {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\r\n  }\r\n\r\n  &.disabled {\r\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\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","_templateObject","_taggedTemplateLiteral","StyledSearchField","_templateObject2","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

@@ -6,14 +6,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _TooltipStyles = require("../Tooltips/TooltipStyles");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styles = require("../styles");
 var _typography = require("../styles/typography");
 var _types = require("../types");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _StateColors, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var InputWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  outline: none;\n  ", ";\n  ", "\n  position: relative;\n  \n  ", "\n\n"])), function (props) {
@@ -22,35 +21,73 @@ var InputWrapper = _styledComponents["default"].div(_templateObject || (_templat
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 }, (0, _TooltipStyles.TooltipTrigger)('hover'));
 exports.InputWrapper = InputWrapper;
-var readOnlyState = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  box-shadow: inset 0 0 0 1px ", " !important;\n  color: ", " !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_600);
+var readOnlyState = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  box-shadow: inset 0 0 0 1px ", " !important;\n  color: ", " !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n"])), function (props) {
+  return _styles.COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_600', props.theme);
+});
 exports.readOnlyState = readOnlyState;
-var activeErrorMessageState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  box-shadow: inset 0 0 0 2px ", ";\n"])), _styles.COLORS.critical_400);
+var activeErrorMessageState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  box-shadow: inset 0 0 0 2px ", ";\n"])), function (props) {
+  return _styles.COLORS.getColor('critical_400', props.theme);
+});
 exports.activeErrorMessageState = activeErrorMessageState;
 var InputFieldStyling = _styledComponents["default"].input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  margin-bottom: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ", "\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 ", "px 0 16px !important;\n  text-overflow: ellipsis;\n\n  outline: none;\n  overflow: hidden;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ", " !important;\n\n  ", "\n\n  &:read-only:not(:disabled) {\n    ", "\n  }\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ", " !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n"])), function (props) {
-  return props.withoutBorder ? "-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      " : "-webkit-box-shadow: inset 0px 0px 0px 1px ".concat(_styles.COLORS.neutral_400, ";\n      -moz-box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.neutral_400, ";\n      box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.neutral_400, ";");
+  return props.withoutBorder ? "-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      " : "-webkit-box-shadow: inset 0px 0px 0px 1px ".concat(_styles.COLORS.getColor('neutral_400', props.theme), ";\n      -moz-box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.getColor('neutral_400', props.theme), ";\n      box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.getColor('neutral_400', props.theme), ";");
 }, function (props) {
   var _props$extraRightPadd;
   return 16 + ((_props$extraRightPadd = props.extraRightPadding) !== null && _props$extraRightPadd !== void 0 ? _props$extraRightPadd : 0);
-}, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), _styles.COLORS.black, function (props) {
+}, function (props) {
+  return (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme));
+}, _styles.BREAKPOINTS.MEDIUM, function (props) {
+  return (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme));
+}, function (props) {
+  return _styles.COLORS.getColor('black', props.theme);
+}, function (props) {
   return props.activeErrorMessage ? activeErrorMessageState : '';
 }, function (props) {
   return props.suppressReadOnlyStyles ? '' : readOnlyState;
-}, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.primary_800, _styles.focusStyles, _styles.COLORS.critical_400, _styles.COLORS.correct_500, _styles.COLORS.primary_700, _styles.COLORS.primary_800);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_300', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_800', props.theme);
+}, _styles.focusStyles, function (props) {
+  return _styles.COLORS.getColor('critical_400', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('correct_500', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_700', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_800', props.theme);
+});
 exports.InputFieldStyling = InputFieldStyling;
-var ValidationStyling = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  &.error-msg {\n    ", "\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ", "\n    font-weight: 700;\n    line-height: 15px;\n  }\n"])), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, '#e76468'));
+var ValidationStyling = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  &.error-msg {\n    ", "\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ", "\n    font-weight: 700;\n    line-height: 15px;\n  }\n"])), function (props) {
+  return (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme));
+}, (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, '#e76468'));
 exports.ValidationStyling = ValidationStyling;
 var Warning = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 4px;\n  ", "\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ", " {\n    ", "\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ", "\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ", "\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n"])), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, null), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, null), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, null), (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, null));
 exports.Warning = Warning;
-var ErrorMessage = (0, _styledComponents["default"])(Warning)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n"])), _styles.COLORS.critical_500);
+var ErrorMessage = (0, _styledComponents["default"])(Warning)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n"])), function (props) {
+  return _styles.COLORS.getColor('critical_500', props.theme);
+});
 exports.ErrorMessage = ErrorMessage;
-var StateColors = (_StateColors = {}, (0, _defineProperty2["default"])(_StateColors, _types.States.Default, _styles.COLORS.neutral_500), (0, _defineProperty2["default"])(_StateColors, _types.States.Valid, _styles.COLORS.correct_500), (0, _defineProperty2["default"])(_StateColors, _types.States.Invalid, _styles.COLORS.critical_500), _StateColors);
+var getStateColor = function getStateColor(type, 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);
+};
 var ValidationMessage = (0, _styledComponents["default"])(Warning)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n"])), function (props) {
-  return StateColors[props.type];
+  return getStateColor(props.type, props.theme);
 });
 exports.ValidationMessage = ValidationMessage;
-var NoteMessage = (0, _styledComponents["default"])(Warning)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n"])), _styles.COLORS.neutral_500);
+var NoteMessage = (0, _styledComponents["default"])(Warning)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n"])), function (props) {
+  return _styles.COLORS.getColor('neutral_500', props.theme);
+});
 exports.NoteMessage = NoteMessage;
-var AutofilledMessage = (0, _styledComponents["default"])(Warning)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n"])), _styles.COLORS.neutral_600);
+var AutofilledMessage = (0, _styledComponents["default"])(Warning)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n"])), function (props) {
+  return _styles.COLORS.getColor('neutral_600', props.theme);
+});
 exports.AutofilledMessage = AutofilledMessage;
 var StyledIcon = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  border-radius: 50%;\n"])));
 exports.StyledIcon = StyledIcon;