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

package/dist/InputFields/Textarea.cjs

@@ -39,30 +39,51 @@ const TextareaWrapper = _styledComponents.default.div`
 `;
 const TextArea = _styledComponents.default.textarea`
   display: block;
-  background: ${props => _styles.COLORS.getColor('white', props.theme)};
+  background: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
   border-radius: 4px;
   outline: none;
   margin-bottom: 4px;
   padding: 16px;
   border: none;
-  box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.getColor('neutral_400', props.theme)};
+  box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'default'
+}, props.theme)};
 
   resize: ${props => props.$autoHeight ? 'none' : ''};
 
-  ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+  ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
   &.small {
-    ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+    ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
     width: 304px;
 
     &::placeholder {
-      ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme))}
+      ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 
   &.medium {
-    ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+    ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
     &::placeholder {
-      ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme))}
+      ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
     width: 344px;
   }
@@ -76,19 +97,31 @@ const TextArea = _styledComponents.default.textarea`
   }
 
   &.invalid {
-    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.getColor('critical_500', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'critical'
+}, props.theme)};
   }
 
   &.valid {
-    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.getColor('correct_500', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'positive'
+}, props.theme)};
   }
 
   &:hover {
-    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'hover'
+}, props.theme)};
   }
 
   &.active {
-    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'active'
+}, props.theme)};
   }
 
   &:read-only:not(:disabled) {
@@ -97,17 +130,29 @@ const TextArea = _styledComponents.default.textarea`
 
   &:disabled {
     cursor: not-allowed;
-    border: 1px solid ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+    border: 1px solid ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
     box-shadow: none !important;
-    color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)} !important;
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)} !important;
 
     &::placeholder {
-      color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+      color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
     }
   }
 
   &::placeholder {
-    ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme))}
+    ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   }
 `;
 const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -148,9 +193,15 @@ const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       className: size || '',
       type: state ?? _types.States.Invalid,
       children: [state === _types.States.Valid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.CheckMark, {
-        color: _styles.COLORS.getColor('correct_400', theme)
+        color: _styles.COLORS.generateToken({
+          componentType: 'text',
+          defaultVariant: 'positive'
+        }, theme)
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.TechnicalWarning, {
-        color: _styles.COLORS.getColor('critical_400', theme)
+        color: _styles.COLORS.generateToken({
+          componentType: 'text',
+          defaultVariant: 'critical'
+        }, theme)
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: validationMessage
       })]

package/dist/InputFields/Textarea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.cjs","names":["React","_interopRequireWildcard","require","_styles","_styling","_types","_icons","_styledComponents","_common","_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","TextareaWrapper","styled","div","props","$margin","TextArea","textarea","COLORS","getColor","theme","$autoHeight","ComponentMStyling","ComponentTextStyle","Regular","ComponentSStyling","Italic","focusStyles","readOnlyState","Textarea","forwardRef","_ref","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","margin","autoHeight","note","required","className","dataTestId","rest","_objectWithoutProperties2","elementRef","useFocusVisibleRef","useTheme","useImperativeHandle","current","cls","States","Invalid","jsxs","children","jsx","undefined","target","ValidationMessage","type","Valid","SystemIcons","CheckMark","color","TechnicalWarning","NoteMessage","icon","message","_default","exports"],"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":[]}
+{"version":3,"file":"Textarea.cjs","names":["React","_interopRequireWildcard","require","_styles","_styling","_types","_icons","_styledComponents","_common","_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","TextareaWrapper","styled","div","props","$margin","TextArea","textarea","COLORS","generateToken","componentType","defaultVariant","theme","$autoHeight","ComponentMStyling","ComponentTextStyle","Regular","ComponentSStyling","Italic","getColor","focusStyles","state","readOnlyState","Textarea","forwardRef","_ref","ref","id","placeholder","value","size","disabled","validationMessage","onChange","margin","autoHeight","note","required","className","dataTestId","rest","_objectWithoutProperties2","elementRef","useFocusVisibleRef","useTheme","useImperativeHandle","current","cls","States","Invalid","jsxs","children","jsx","undefined","target","ValidationMessage","type","Valid","SystemIcons","CheckMark","color","TechnicalWarning","NoteMessage","icon","message","_default","exports"],"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.generateToken({ componentType:'bg-surface', defaultVariant:'default' }, 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.generateToken({ componentType:'border', defaultVariant:'default' }, props.theme)};\r\n\r\n  resize: ${(props) => (props.$autoHeight ? 'none' : '')};\r\n\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({ componentType: 'text', defaultVariant: 'default' }, props.theme))}\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({ componentType: 'text', defaultVariant: 'default' }, props.theme))}\r\n    width: 304px;\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    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, 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.generateToken({ componentType: 'border', defaultVariant: 'critical' }, props.theme)};\r\n  }\r\n\r\n  &.valid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'positive' }, props.theme)};\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  &.active {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType: 'border', state: 'active' }, 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.generateToken({ componentType: 'border', state: 'disabled' }, props.theme)};\r\n    box-shadow: none !important;\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)} !important;\r\n\r\n    &::placeholder {\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n    }\r\n  }\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\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.generateToken({componentType:'text', defaultVariant:'positive'}, theme)} /> : \r\n            <SystemIcons.TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, 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/Textarea.js

@@ -35,30 +35,51 @@ const TextareaWrapper = styled.div`
 `;
 const TextArea = styled.textarea`
   display: block;
-  background: ${props => COLORS.getColor('white', props.theme)};
+  background: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
   border-radius: 4px;
   outline: none;
   margin-bottom: 4px;
   padding: 16px;
   border: none;
-  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};
+  box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'default'
+}, props.theme)};
 
   resize: ${props => props.$autoHeight ? 'none' : ''};
 
-  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
   &.small {
-    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
     width: 304px;
 
     &::placeholder {
-      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}
+      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
   }
 
   &.medium {
-    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
     &::placeholder {
-      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}
+      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
     width: 344px;
   }
@@ -72,19 +93,31 @@ const TextArea = styled.textarea`
   }
 
   &.invalid {
-    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_500', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'critical'
+}, props.theme)};
   }
 
   &.valid {
-    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('correct_500', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'positive'
+}, props.theme)};
   }
 
   &:hover {
-    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_700', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'hover'
+}, props.theme)};
   }
 
   &.active {
-    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'active'
+}, props.theme)};
   }
 
   &:read-only:not(:disabled) {
@@ -93,17 +126,29 @@ const TextArea = styled.textarea`
 
   &:disabled {
     cursor: not-allowed;
-    border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};
+    border: 1px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
     box-shadow: none !important;
-    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)} !important;
 
     &::placeholder {
-      color: ${props => COLORS.getColor('neutral_300', props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
     }
   }
 
   &::placeholder {
-    ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}
+    ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   }
 `;
 const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -144,9 +189,15 @@ const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       className: size || '',
       type: state ?? States.Invalid,
       children: [state === States.Valid ? /*#__PURE__*/_jsx(SystemIcons.CheckMark, {
-        color: COLORS.getColor('correct_400', theme)
+        color: COLORS.generateToken({
+          componentType: 'text',
+          defaultVariant: 'positive'
+        }, theme)
       }) : /*#__PURE__*/_jsx(SystemIcons.TechnicalWarning, {
-        color: COLORS.getColor('critical_400', theme)
+        color: COLORS.generateToken({
+          componentType: 'text',
+          defaultVariant: 'critical'
+        }, 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","useTheme","ComponentMStyling","ComponentTextStyle","useFocusVisibleRef","jsx","_jsx","jsxs","_jsxs","TextareaWrapper","div","props","$margin","TextArea","textarea","getColor","theme","$autoHeight","Regular","Italic","Textarea","forwardRef","_ref","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","margin","autoHeight","note","required","className","dataTestId","rest","_objectWithoutProperties","_excluded","elementRef","useImperativeHandle","current","cls","Invalid","children","_objectSpread","undefined","e","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":[]}
+{"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","props","$margin","TextArea","textarea","generateToken","componentType","defaultVariant","theme","$autoHeight","Regular","Italic","getColor","state","Textarea","forwardRef","_ref","ref","id","placeholder","value","size","disabled","validationMessage","onChange","margin","autoHeight","note","required","className","dataTestId","rest","_objectWithoutProperties","_excluded","elementRef","useImperativeHandle","current","cls","Invalid","children","_objectSpread","undefined","e","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.generateToken({ componentType:'bg-surface', defaultVariant:'default' }, 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.generateToken({ componentType:'border', defaultVariant:'default' }, props.theme)};\r\n\r\n  resize: ${(props) => (props.$autoHeight ? 'none' : '')};\r\n\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({ componentType: 'text', defaultVariant: 'default' }, props.theme))}\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({ componentType: 'text', defaultVariant: 'default' }, props.theme))}\r\n    width: 304px;\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    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, 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.generateToken({ componentType: 'border', defaultVariant: 'critical' }, props.theme)};\r\n  }\r\n\r\n  &.valid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'positive' }, props.theme)};\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  &.active {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType: 'border', state: 'active' }, 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.generateToken({ componentType: 'border', state: 'disabled' }, props.theme)};\r\n    box-shadow: none !important;\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)} !important;\r\n\r\n    &::placeholder {\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n    }\r\n  }\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\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.generateToken({componentType:'text', defaultVariant:'positive'}, theme)} /> : \r\n            <SystemIcons.TechnicalWarning color={COLORS.generateToken({componentType:'text', defaultVariant:'critical'}, 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/__tests__/NumberField.test.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import {render} from '../../test-utils';
+import {Size, States} from '../../types';
+import 'jest-styled-components';
+import {COLORS, NumberField} from '../..';
+
+
+describe('<NumberField />', () => {
+
+    it('renders note field', async () => {
+        const { getByText } = render(
+            <NumberField type='NumberField'  note='test note' size={Size.Medium}/>
+        );
+        expect(getByText('test note')).toBeDefined();
+    });
+
+    it('renders required asterisk', async () => {
+        const { queryByTestId } = render(
+            <NumberField type='NumberField' dataTestId='numberInput' required size={Size.Medium}/>
+        );
+        expect(queryByTestId('labelIcon')).toBeDefined();
+    });
+
+    it('does not renders required asterisk', async () => {
+        const { queryByTestId } = render(
+            <NumberField type='NumberField' dataTestId='numberInput'  size={Size.Medium}/>
+        );
+        expect(queryByTestId('labelIcon')).toBeNull();
+    });
+
+    it('renders positive note and input container', async () => {
+        const { container, getByTestId } = render(
+            <NumberField type='NumberField' dataTestId='numberInput' note='test note' state={States.Valid} size={Size.Medium}/>
+        );
+        expect(container.getElementsByClassName('valid').length).toBe(1);
+    });
+
+    it('renders warning note and input container', async () => {
+        const { container, getByTestId } = render(
+            <NumberField type='NumberField' dataTestId='numberInput' note='test note' state={States.Invalid} size={Size.Medium}/>
+        );
+        expect(container.getElementsByClassName('invalid').length).toBe(1);
+    });
+
+    it('renders correct disabled input container', async () => {
+        const { getByTestId } = render(
+            <NumberField type='NumberField' dataTestId='numberInput' size={Size.Small}/>
+        );
+        expect(getByTestId('numberInput')).toHaveStyleRule('cursor', `not-allowed`, {modifier:'&.disabled'});
+    });
+
+    it('renders correct readonly input container', async () => {
+        const { getByTestId } = render(
+            <NumberField type='NumberField' dataTestId='numberInput' size={Size.Small}/>
+        );
+        expect(getByTestId('numberInput')).toHaveStyleRule('cursor', `not-allowed`, {modifier:'&.readOnly'});
+    });
+
+    it('renders operators in the input container', async () => {
+        const { getByTestId } = render(
+            <NumberField type='NumberField' dataTestId='numberInput' size={Size.Medium}/>
+        );
+        expect(getByTestId('operators').childElementCount).toBe(3);
+        expect(getByTestId('operators').firstChild).toBeDefined();
+        expect(getByTestId('operators').lastChild).toBeDefined();
+    })
+})

package/dist/InputFields/__tests__/NumberInput.test.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import {Size, States} from '../../types';
+import 'jest-styled-components';
+import { COLORS, NumberField } from '../..';
+
+
+describe('<NumberField />', () => {
+
+    it('renders note field', async () => {
+        const { getByText } = render(
+            <NumberField type='NumberInput'  note='test note' size={Size.Medium}/>
+        );
+        expect(getByText('test note')).toBeDefined();
+    });
+
+    it('renders required asterisk', async () => {
+        const { queryByTestId } = render(
+            <NumberField type='NumberInput'  required size={Size.Medium}/>
+        );
+        expect(queryByTestId('labelIcon')).toBeDefined();
+    });
+
+    it('does not renders required asterisk', async () => {
+        const { queryByTestId } = render(
+            <NumberField type='NumberInput'  size={Size.Medium}/>
+        );
+        expect(queryByTestId('labelIcon')).toBeNull();
+    });
+
+    it('renders positive note and input container', async () => {
+        const { container, getByTestId } = render(
+            <NumberField type='NumberInput' dataTestId='numberInput' note='test note' state={States.Valid} size={Size.Medium}/>
+        );
+        expect(container.getElementsByClassName('valid').length).toBe(1);
+    });
+
+    it('renders warning note and input container', async () => {
+        const { container, getByTestId } = render(
+            <NumberField type='NumberInput' dataTestId='numberInput' note='test note' state={States.Invalid} size={Size.Medium}/>
+        );
+        expect(container.getElementsByClassName('invalid').length).toBe(1);
+    });
+
+    it('renders correct disabled input container', async () => {
+        const { getByTestId } = render(
+            <NumberField type='NumberInput' dataTestId='numberInput'  size={Size.Small}/>
+        );
+        expect(getByTestId('numberInput')).toHaveStyleRule('cursor', `not-allowed`, {modifier:'&.disabled'});
+    });
+
+    it('renders correct readonly input container', async () => {
+        const { getByTestId } = render(
+            <NumberField type='NumberInput' dataTestId='numberInput'  size={Size.Small}/>
+        );
+        expect(getByTestId('numberInput')).toHaveStyleRule('cursor', `not-allowed`, {modifier:'&.readOnly'});
+    });
+
+    it('renders operators in the input container', async () => {
+        const { getByTestId } = render(
+            <NumberField type='NumberInput' size={Size.Medium}/>
+        );
+        expect(getByTestId('leftOperator')).toHaveStyleRule('left', '0');
+        expect(getByTestId('leftOperator')).toHaveStyleRule('top', '4px');
+        expect(getByTestId('rightOperator')).toHaveStyleRule('right', '0');
+        expect(getByTestId('rightOperator')).toHaveStyleRule('top', '4px');
+    })
+})

package/dist/InputFields/__tests__/QuickSearch.test.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { findByTestId, render } from '../../test-utils';
+import {Size} from '../../types';
+import 'jest-styled-components';
+import { QuickSearch } from '..';
+import { ThemeProvider } from 'styled-components';
+
+describe('<QuickSearch />', () => {
+
+
+  it('Renders quick search', async () => {
+    let search = '';
+    let searchEntered = false;
+    const { queryByText, getByTestId, queryAllByTestId, container } = render(
+      <ThemeProvider theme={{}}>
+      <div style={{ width: '400px' }}>
+        <QuickSearch
+          id="QuickSearch"
+          size={Size.Small}
+          enterSearch={() => {
+            searchEntered = true;
+          }}
+          removeSearch={() => {
+            search = '';
+          }}
+          setSearchTerm={(term) => {
+            search = term;
+          }}
+        />
+      </div></ThemeProvider>,
+    );
+    expect(getByTestId('QuickSearch_main').classList.contains('small')).toBeTruthy();
+    expect(getByTestId('QuickSearch_Searchbutton')).toBeDefined();
+
+    // Test click on icon and check that input field shows
+    expect(queryAllByTestId('QuickSearch').length).toBe(0);
+    (await findByTestId(container, 'QuickSearch_Searchbutton') as HTMLButtonElement)?.click();
+    expect(await findByTestId(container, 'QuickSearch_main')).toBeDefined();
+    expect(getByTestId('QuickSearch_main').classList.contains('expanded')).toBeTruthy();
+    expect(getByTestId('QuickSearch_Clearicon').parentElement).toHaveProperty('hidden');
+  });
+});