@laerdal/life-react-components 5.0.0-dev.1 → 5.0.0-dev.3

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","_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","TextareaWrapper","styled","div","_taggedTemplateLiteral2","props","margin","concat","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","note","required","className","dataTestId","rest","_objectWithoutProperties2","elementRef","useFocusVisibleRef","useTheme","useImperativeHandle","current","cls","States","Invalid","jsxs","children","jsx","undefined","_e$target","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","_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","TextareaWrapper","styled","div","_taggedTemplateLiteral2","props","$margin","concat","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","_e$target","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":[]}

package/dist/InputFields/Textarea.js

@@ -33,14 +33,14 @@ import { useFocusVisibleRef } from "../common";
 import { jsx as _jsx } from "react/jsx-runtime";
 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, ";") : '';
+  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"])), function (props) {
   return COLORS.getColor('white', props.theme);
 }, function (props) {
   return COLORS.getColor('neutral_400', props.theme);
 }, function (props) {
-  return props.autoHeight ? 'none' : '';
+  return props.$autoHeight ? 'none' : '';
 }, function (props) {
   return ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
 }, function (props) {
@@ -99,7 +99,7 @@ var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       ref: elementRef,
       value: value,
       placeholder: disabled ? undefined : placeholder,
-      autoHeight: autoHeight,
+      $autoHeight: autoHeight,
       className: cls,
       disabled: disabled,
       onChange: function onChange(e) {

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Size } from '../../types';
 export declare const SearchFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledSearchField: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    activeValidationMessage?: boolean | undefined;
+    $activeValidationMessage?: boolean | undefined;
 }>> & string;
 declare const SearchField: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     id: string;

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","props","getColor","theme","Regular","Italic","MEDIUM","SearchField","forwardRef","_ref","ref","id","searchTerm","disabled","validationMessage","children","size","className","rest","_objectWithoutProperties","_excluded","cls","concat","_objectSpread","propTypes","_pt","string","isRequired","bool","any"],"sources":["../../../src/InputFields/components/SearchField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles } from '../../styles/index';\r\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\r\nimport { Size } from '../../types';\r\n\r\nexport const SearchFieldWrapper = styled.div`\r\n  &.focus-visible-within {\r\n    ${focusStyles}\r\n  }\r\n`;\r\n\r\nexport const StyledSearchField = styled.div<{ activeValidationMessage?: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n  margin-bottom: 4px;\r\n  box-sizing: border-box;\r\n  border-radius: 56px;\r\n  align-items: center;\r\n  position: relative;\r\n  height: 48px;\r\n  appearance: none;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n\r\n  ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n\r\n  padding: 0 !important;\r\n  width: 100%;\r\n\r\n  ::placeholder {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n\r\n    height: 56px;\r\n    padding: 0 4px !important;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    height: 48px;\r\n    padding: 0 !important;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    height: 56px;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  div {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n    background-color: transparent;\r\n  }\r\n\r\n  &.invalid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_400', props.theme)};\r\n  }\r\n\r\n  &.disabled {\r\n    box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    pointer-events: none;\r\n    background-color: transparent !important;\r\n  }\r\n`;\r\n\r\ntype SeachFieldProps = React.HTMLAttributes<HTMLDivElement> & {\r\n  id: string;\r\n  searchTerm?: string;\r\n  disabled?: boolean;\r\n  validationMessage?: string;\r\n  children: any;\r\n  size?: Size.Small | Size.Medium;\r\n};\r\n\r\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({ id, searchTerm, disabled, validationMessage, children, size, className, ...rest }, ref) => {\r\n  const cls = (disabled ? 'disabled ' : '')\r\n    .concat(searchTerm !== '' ? 'searchactive ' : '')\r\n    .concat(size ? `${size} ` : '')\r\n    .concat(validationMessage ? ' invalid ' : '')\r\n    .concat(`${className ?? ''} `);\r\n\r\n  return (\r\n    <SearchFieldWrapper ref={ref}>\r\n      <StyledSearchField id={`${id}_main`} data-testid={`${id}_main`} className={cls} {...rest}>\r\n        {children}\r\n      </StyledSearchField>\r\n    </SearchFieldWrapper>\r\n  );\r\n});\r\n\r\nexport default SearchField;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchField.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","jsx","_jsx","SearchFieldWrapper","div","_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":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,WAAW,EAAEC,MAAM,EAAEC,kBAAkB,EAAEC,WAAW,QAAQ,oBAAoB;AACzF,SAASC,iBAAiB,EAAEC,iBAAiB,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGpE,OAAO,IAAMC,kBAAkB,GAAGT,MAAM,CAACU,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,sDAEtCR,WAAW,CAEhB;AAED,OAAO,IAAMS,iBAAiB,GAAGb,MAAM,CAACU,GAAG,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,sBAAA,skCAGX,UAAAG,KAAK;EAAA,OAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAQ9D,UAAAF,KAAK;EAAA,OAAIb,MAAM,CAACc,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAEhE,UAAAF,KAAK;EAAA,OAAIT,iBAAiB,CAACH,kBAAkB,CAACe,OAAO,EAAEhB,MAAM,CAACc,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC,CAAC;AAAA,GAM3F,UAAAF,KAAK;EAAA,OAAIT,iBAAiB,CAACH,kBAAkB,CAACgB,MAAM,EAAEjB,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,CAAC;AAAA,GAGpGhB,WAAW,CAACmB,MAAM,EAChB,UAAAL,KAAK;EAAA,OAAIV,iBAAiB,CAACF,kBAAkB,CAACe,OAAO,EAAEhB,MAAM,CAACc,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC,CAAC;AAAA,GAM3F,UAAAF,KAAK;EAAA,OAAIV,iBAAiB,CAACF,kBAAkB,CAACgB,MAAM,EAAEjB,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,CAAC;AAAA,GAKpG,UAAAF,KAAK;EAAA,OAAIT,iBAAiB,CAACH,kBAAkB,CAACe,OAAO,EAAEhB,MAAM,CAACc,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC,CAAC;AAAA,GAK3F,UAAAF,KAAK;EAAA,OAAIT,iBAAiB,CAACH,kBAAkB,CAACgB,MAAM,EAAEjB,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,CAAC;AAAA,GAKpG,UAAAF,KAAK;EAAA,OAAIV,iBAAiB,CAACF,kBAAkB,CAACe,OAAO,EAAEhB,MAAM,CAACc,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC,CAAC;AAAA,GAI3F,UAAAF,KAAK;EAAA,OAAIV,iBAAiB,CAACF,kBAAkB,CAACgB,MAAM,EAAEjB,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,CAAC;AAAA,GAKxE,UAAAF,KAAK;EAAA,OAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAIpD,UAAAF,KAAK;EAAA,OAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAIzE,UAAAF,KAAK;EAAA,OAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAK/B,UAAAF,KAAK;EAAA,OAAIb,MAAM,CAACc,QAAQ,CAAC,cAAc,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAIrD,UAAAF,KAAK;EAAA,OAAIb,MAAM,CAACc,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,EAIrF;AAWD,IAAMI,WAAW,gBAAGtB,KAAK,CAACuB,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,GAAAC,wBAAA,CAAAV,IAAA,EAAAW,SAAA;EACtJ,IAAMC,GAAG,GAAG,CAACR,QAAQ,GAAG,WAAW,GAAG,EAAE,EACrCS,MAAM,CAACV,UAAU,KAAK,EAAE,GAAG,eAAe,GAAG,EAAE,CAAC,CAChDU,MAAM,CAACN,IAAI,MAAAM,MAAA,CAAMN,IAAI,SAAM,EAAE,CAAC,CAC9BM,MAAM,CAACR,iBAAiB,GAAG,WAAW,GAAG,EAAE,CAAC,CAC5CQ,MAAM,IAAAA,MAAA,CAAIL,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,EAAE,MAAG,CAAC;EAEhC,oBACEvB,IAAA,CAACC,kBAAkB;IAACe,GAAG,EAAEA,GAAI;IAAAK,QAAA,eAC3BrB,IAAA,CAACK,iBAAiB,EAAAwB,aAAA,CAAAA,aAAA;MAACZ,EAAE,KAAAW,MAAA,CAAKX,EAAE,UAAQ;MAAC,kBAAAW,MAAA,CAAgBX,EAAE,UAAQ;MAACM,SAAS,EAAEI;IAAI,GAAKH,IAAI;MAAAH,QAAA,EACrFA;IAAQ,EACQ;EAAC,CACF,CAAC;AAEzB,CAAC,CAAC;AAACR,WAAA,CAAAiB,SAAA;EAtBDb,EAAE,EAAAc,GAAA,CAAAC,MAAA,CAAAC,UAAA;EACFf,UAAU,EAAAa,GAAA,CAAAC,MAAA;EACVb,QAAQ,EAAAY,GAAA,CAAAG,IAAA;EACRd,iBAAiB,EAAAW,GAAA,CAAAC,MAAA;EACjBX,QAAQ,EAAAU,GAAA,CAAAI,GAAA,CAAAF;AAAA;AAoBV,eAAepB,WAAW","ignoreList":[]}

package/dist/InputFields/styling.cjs

@@ -16,9 +16,9 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 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) {
-  return props.readOnly || props.disabled ? 'cursor: not-allowed;' : '';
+  return props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '';
 }, function (props) {
-  return props.margin ? "margin: ".concat(props.margin, ";") : '';
+  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"])), function (props) {
@@ -34,10 +34,10 @@ var activeErrorMessageState = (0, _styledComponents.css)(_templateObject3 || (_t
 });
 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.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), ";");
+  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);
+  var _props$$extraRightPad;
+  return 16 + ((_props$$extraRightPad = props.$extraRightPadding) !== null && _props$$extraRightPad !== void 0 ? _props$$extraRightPad : 0);
 }, function (props) {
   return (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme));
 }, _styles.BREAKPOINTS.MEDIUM, function (props) {
@@ -45,9 +45,9 @@ var InputFieldStyling = _styledComponents["default"].input(_templateObject4 || (
 }, function (props) {
   return _styles.COLORS.getColor('black', props.theme);
 }, function (props) {
-  return props.activeErrorMessage ? activeErrorMessageState : '';
+  return props.$activeErrorMessage ? activeErrorMessageState : '';
 }, function (props) {
-  return props.suppressReadOnlyStyles ? '' : readOnlyState;
+  return props.$suppressReadOnlyStyles ? '' : readOnlyState;
 }, function (props) {
   return _styles.COLORS.getColor('neutral_100', props.theme);
 }, function (props) {

package/dist/InputFields/styling.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styling.cjs","names":["_TooltipStyles","require","_styledComponents","_interopRequireWildcard","_styles","_typography","_types","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","InputWrapper","styled","div","_taggedTemplateLiteral2","props","readOnly","disabled","margin","concat","TooltipTrigger","exports","readOnlyState","css","COLORS","getColor","theme","activeErrorMessageState","InputFieldStyling","input","withoutBorder","_props$extraRightPadd","extraRightPadding","ComponentSStyling","ComponentTextStyle","Italic","BREAKPOINTS","MEDIUM","ComponentMStyling","activeErrorMessage","suppressReadOnlyStyles","focusStyles","ValidationStyling","ComponentXXSStyling","Regular","Warning","ComponentXSStyling","ErrorMessage","getStateColor","type","States","Valid","Default","ValidationMessage","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\nimport styled, { css } from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\r\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\r\nimport {Size, States} from '../types';\r\n\r\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\r\n  outline: none;\r\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\r\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\r\n  position: relative;\r\n  \r\n  ${TooltipTrigger('hover')}\r\n\r\n`;\r\n\r\nexport const readOnlyState = css`\r\n  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)} !important;\r\n  pointer-events: none;\r\n  outline: none;\r\n  cursor: not-allowed;\r\n`;\r\nexport const activeErrorMessageState = css`\r\n  box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_400', props.theme)};\r\n`;\r\n\r\nconst InputFieldStyling = styled.input<{\r\n  activeErrorMessage?: boolean;\r\n  active?: boolean;\r\n  withoutBorder?: boolean;\r\n  size?: string;\r\n  suppressReadOnlyStyles?: boolean;\r\n  extraRightPadding?: number;\r\n}>`\r\n  height: 48px;\r\n  width: 100%;\r\n  border-radius: 4px;\r\n  margin-bottom: 4px;\r\n\r\n  border: 0;\r\n  -webkit-appearance: none;\r\n  ${(props) =>\r\n    props.withoutBorder\r\n      ? `-webkit-box-shadow: none;\r\n      -moz-box-shadow: none;\r\n      box-shadow: none;\r\n      `\r\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};\r\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};\r\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};`}\r\n  background-color: #fff;\r\n  box-sizing: border-box;\r\n  padding: 0 ${props => 16 + (props.extraRightPadding ?? 0)}px 0 16px !important;\r\n  text-overflow: ellipsis;\r\n\r\n  outline: none;\r\n  overflow: hidden;\r\n  position: relative;\r\n\r\n  font-size: 16px;\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    font-size: 18px;\r\n    line-height: 18px;\r\n    height: 56px;\r\n    padding: 0 16px !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    font-size: 16px;\r\n    height: 48px;\r\n    &::placeholder {\r\n      font-size: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    font-size: 18px;\r\n    height: 56px;\r\n    &::placeholder {\r\n      font-size: 18px;\r\n    }\r\n  }\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)} !important;\r\n\r\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\r\n\r\n  &:read-only:not(:disabled) {\r\n    ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\r\n  }\r\n\r\n  &:disabled {\r\n    border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    pointer-events: none;\r\n    box-shadow: none !important;\r\n    outline: none;\r\n    cursor: not-allowed;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  }\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0px 0px 0px 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_400', props.theme)};\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  &:not(.placeholder) {\r\n    line-height: 40px;\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &.show-checkmark.valid {\r\n    background-image: none;\r\n  }\r\n\r\n  &.show-checkmark.pending {\r\n    background-image: none;\r\n  }\r\n`;\r\n\r\nconst ValidationStyling = css`\r\n  &.error-msg {\r\n    ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    text-align: center;\r\n    font-weight: 400;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  &.error-msg {\r\n    padding-top: 8px;\r\n    padding-bottom: 0;\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\r\n    font-weight: 700;\r\n    line-height: 15px;\r\n  }\r\n`;\r\n\r\nexport const Warning = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin-bottom: 4px;\r\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  & * {\r\n    vertical-align: middle;\r\n    display: inline-block;\r\n  }\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n  }\r\n`;\r\nexport const ErrorMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n`;\r\n\r\nconst getStateColor = (type: States, theme: any) => {\r\n  if(type === States.Valid) \r\n    return COLORS.getColor('correct_500', theme);\r\n  else if (type === States.Default)\r\n    return COLORS.getColor('neutral_500', theme);\r\n  else \r\n    return COLORS.getColor('critical_500', theme);\r\n};\r\n  \r\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\r\n  color: ${(props) => getStateColor(props.type, props.theme)};\r\n`;\r\n\r\nexport const NoteMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n`;\r\nexport const AutofilledMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n`;\r\n\r\nexport { ValidationStyling, InputFieldStyling };\r\n\r\nexport const StyledIcon = styled.div`\r\n  border-radius: 50%;\r\n`;\r\n\r\nexport const SearchIconWrapper = styled(StyledIcon)`\r\n  position: absolute;\r\n  border-radius: 50%;\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"styling.cjs","names":["_TooltipStyles","require","_styledComponents","_interopRequireWildcard","_styles","_typography","_types","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","InputWrapper","styled","div","_taggedTemplateLiteral2","props","$readOnly","$disabled","$margin","concat","TooltipTrigger","exports","readOnlyState","css","COLORS","getColor","theme","activeErrorMessageState","InputFieldStyling","input","$withoutBorder","_props$$extraRightPad","$extraRightPadding","ComponentSStyling","ComponentTextStyle","Italic","BREAKPOINTS","MEDIUM","ComponentMStyling","$activeErrorMessage","$suppressReadOnlyStyles","focusStyles","ValidationStyling","ComponentXXSStyling","Regular","Warning","ComponentXSStyling","ErrorMessage","getStateColor","type","States","Valid","Default","ValidationMessage","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\nimport styled, { css } from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\r\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\r\nimport {Size, States} from '../types';\r\n\r\nexport const InputWrapper = styled.div<{ $readOnly?: boolean; $disabled?: boolean; $margin?: string }>`\r\n  outline: none;\r\n  ${(props) => (props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '')};\r\n  ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n  position: relative;\r\n  \r\n  ${TooltipTrigger('hover')}\r\n\r\n`;\r\n\r\nexport const readOnlyState = css`\r\n  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)} !important;\r\n  pointer-events: none;\r\n  outline: none;\r\n  cursor: not-allowed;\r\n`;\r\nexport const activeErrorMessageState = css`\r\n  box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_400', props.theme)};\r\n`;\r\n\r\nconst InputFieldStyling = styled.input<{\r\n  $activeErrorMessage?: boolean;\r\n  $active?: boolean;\r\n  $withoutBorder?: boolean;\r\n  $size?: string;\r\n  $suppressReadOnlyStyles?: boolean;\r\n  $extraRightPadding?: number;\r\n}>`\r\n  height: 48px;\r\n  width: 100%;\r\n  border-radius: 4px;\r\n  margin-bottom: 4px;\r\n\r\n  border: 0;\r\n  -webkit-appearance: none;\r\n  ${(props) =>\r\n    props.$withoutBorder\r\n      ? `-webkit-box-shadow: none;\r\n      -moz-box-shadow: none;\r\n      box-shadow: none;\r\n      `\r\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};\r\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};\r\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};`}\r\n  background-color: #fff;\r\n  box-sizing: border-box;\r\n  padding: 0 ${props => 16 + (props.$extraRightPadding ?? 0)}px 0 16px !important;\r\n  text-overflow: ellipsis;\r\n\r\n  outline: none;\r\n  overflow: hidden;\r\n  position: relative;\r\n\r\n  font-size: 16px;\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    font-size: 18px;\r\n    line-height: 18px;\r\n    height: 56px;\r\n    padding: 0 16px !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    font-size: 16px;\r\n    height: 48px;\r\n    &::placeholder {\r\n      font-size: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    font-size: 18px;\r\n    height: 56px;\r\n    &::placeholder {\r\n      font-size: 18px;\r\n    }\r\n  }\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)} !important;\r\n\r\n  ${(props) => (props.$activeErrorMessage ? activeErrorMessageState : '')}\r\n\r\n  &:read-only:not(:disabled) {\r\n    ${(props) => (props.$suppressReadOnlyStyles ? '' : readOnlyState)}\r\n  }\r\n\r\n  &:disabled {\r\n    border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    pointer-events: none;\r\n    box-shadow: none !important;\r\n    outline: none;\r\n    cursor: not-allowed;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  }\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0px 0px 0px 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_400', props.theme)};\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  &:not(.placeholder) {\r\n    line-height: 40px;\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &.show-checkmark.valid {\r\n    background-image: none;\r\n  }\r\n\r\n  &.show-checkmark.pending {\r\n    background-image: none;\r\n  }\r\n`;\r\n\r\nconst ValidationStyling = css`\r\n  &.error-msg {\r\n    ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    text-align: center;\r\n    font-weight: 400;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  &.error-msg {\r\n    padding-top: 8px;\r\n    padding-bottom: 0;\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\r\n    font-weight: 700;\r\n    line-height: 15px;\r\n  }\r\n`;\r\n\r\nexport const Warning = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin-bottom: 4px;\r\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  & * {\r\n    vertical-align: middle;\r\n    display: inline-block;\r\n  }\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n  }\r\n`;\r\nexport const ErrorMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n`;\r\n\r\nconst getStateColor = (type: States, theme: any) => {\r\n  if(type === States.Valid) \r\n    return COLORS.getColor('correct_500', theme);\r\n  else if (type === States.Default)\r\n    return COLORS.getColor('neutral_500', theme);\r\n  else \r\n    return COLORS.getColor('critical_500', theme);\r\n};\r\n  \r\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\r\n  color: ${(props) => getStateColor(props.type, props.theme)};\r\n`;\r\n\r\nexport const NoteMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n`;\r\nexport const AutofilledMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n`;\r\n\r\nexport { ValidationStyling, InputFieldStyling };\r\n\r\nexport const StyledIcon = styled.div`\r\n  border-radius: 50%;\r\n`;\r\n\r\nexport const SearchIconWrapper = styled(StyledIcon)`\r\n  position: absolute;\r\n  border-radius: 50%;\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/styling.d.ts

@@ -1,19 +1,19 @@
 /// <reference types="react" />
 import { States } from '../types';
 export declare const InputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    readOnly?: boolean | undefined;
-    disabled?: boolean | undefined;
-    margin?: string | undefined;
+    $readOnly?: boolean | undefined;
+    $disabled?: boolean | undefined;
+    $margin?: string | undefined;
 }>> & string;
 export declare const readOnlyState: import("styled-components").RuleSet<object>;
 export declare const activeErrorMessageState: import("styled-components").RuleSet<object>;
 declare const InputFieldStyling: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
-    activeErrorMessage?: boolean | undefined;
-    active?: boolean | undefined;
-    withoutBorder?: boolean | undefined;
-    size?: string | undefined;
-    suppressReadOnlyStyles?: boolean | undefined;
-    extraRightPadding?: number | undefined;
+    $activeErrorMessage?: boolean | undefined;
+    $active?: boolean | undefined;
+    $withoutBorder?: boolean | undefined;
+    $size?: string | undefined;
+    $suppressReadOnlyStyles?: boolean | undefined;
+    $extraRightPadding?: number | undefined;
 }>> & string;
 declare const ValidationStyling: import("styled-components").RuleSet<object>;
 export declare const Warning: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/InputFields/styling.js

@@ -6,9 +6,9 @@ import { BREAKPOINTS, COLORS, focusStyles } from '../styles';
 import { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';
 import { States } from '../types';
 export var InputWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n  ", ";\n  ", "\n  position: relative;\n  \n  ", "\n\n"])), function (props) {
-  return props.readOnly || props.disabled ? 'cursor: not-allowed;' : '';
+  return props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '';
 }, function (props) {
-  return props.margin ? "margin: ".concat(props.margin, ";") : '';
+  return props.$margin ? "margin: ".concat(props.$margin, ";") : '';
 }, TooltipTrigger('hover'));
 export var readOnlyState = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: inset 0 0 0 1px ", " !important;\n  color: ", " !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n"])), function (props) {
   return COLORS.getColor('neutral_100', props.theme);
@@ -21,10 +21,10 @@ export var activeErrorMessageState = css(_templateObject3 || (_templateObject3 =
   return COLORS.getColor('critical_400', props.theme);
 });
 var InputFieldStyling = styled.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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(COLORS.getColor('neutral_400', props.theme), ";\n      -moz-box-shadow: inset 0px 0px 0px 1px ").concat(COLORS.getColor('neutral_400', props.theme), ";\n      box-shadow: inset 0px 0px 0px 1px ").concat(COLORS.getColor('neutral_400', props.theme), ";");
+  return props.$withoutBorder ? "-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      " : "-webkit-box-shadow: inset 0px 0px 0px 1px ".concat(COLORS.getColor('neutral_400', props.theme), ";\n      -moz-box-shadow: inset 0px 0px 0px 1px ").concat(COLORS.getColor('neutral_400', props.theme), ";\n      box-shadow: inset 0px 0px 0px 1px ").concat(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);
+  var _props$$extraRightPad;
+  return 16 + ((_props$$extraRightPad = props.$extraRightPadding) !== null && _props$$extraRightPad !== void 0 ? _props$$extraRightPad : 0);
 }, function (props) {
   return ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme));
 }, BREAKPOINTS.MEDIUM, function (props) {
@@ -32,9 +32,9 @@ var InputFieldStyling = styled.input(_templateObject4 || (_templateObject4 = _ta
 }, function (props) {
   return COLORS.getColor('black', props.theme);
 }, function (props) {
-  return props.activeErrorMessage ? activeErrorMessageState : '';
+  return props.$activeErrorMessage ? activeErrorMessageState : '';
 }, function (props) {
-  return props.suppressReadOnlyStyles ? '' : readOnlyState;
+  return props.$suppressReadOnlyStyles ? '' : readOnlyState;
 }, function (props) {
   return COLORS.getColor('neutral_100', props.theme);
 }, function (props) {

package/dist/InputFields/styling.js.map

@@ -1 +1 @@
-{"version":3,"file":"styling.js","names":["TooltipTrigger","styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentXSStyling","States","InputWrapper","div","_templateObject","_taggedTemplateLiteral","props","readOnly","disabled","margin","concat","readOnlyState","_templateObject2","getColor","theme","activeErrorMessageState","_templateObject3","InputFieldStyling","input","_templateObject4","withoutBorder","_props$extraRightPadd","extraRightPadding","Italic","MEDIUM","activeErrorMessage","suppressReadOnlyStyles","ValidationStyling","_templateObject5","Regular","Warning","_templateObject6","ErrorMessage","_templateObject7","getStateColor","type","Valid","Default","ValidationMessage","_templateObject8","NoteMessage","_templateObject9","AutofilledMessage","_templateObject10","StyledIcon","_templateObject11","SearchIconWrapper","_templateObject12"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\nimport styled, { css } from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\r\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\r\nimport {Size, States} from '../types';\r\n\r\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\r\n  outline: none;\r\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\r\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\r\n  position: relative;\r\n  \r\n  ${TooltipTrigger('hover')}\r\n\r\n`;\r\n\r\nexport const readOnlyState = css`\r\n  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)} !important;\r\n  pointer-events: none;\r\n  outline: none;\r\n  cursor: not-allowed;\r\n`;\r\nexport const activeErrorMessageState = css`\r\n  box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_400', props.theme)};\r\n`;\r\n\r\nconst InputFieldStyling = styled.input<{\r\n  activeErrorMessage?: boolean;\r\n  active?: boolean;\r\n  withoutBorder?: boolean;\r\n  size?: string;\r\n  suppressReadOnlyStyles?: boolean;\r\n  extraRightPadding?: number;\r\n}>`\r\n  height: 48px;\r\n  width: 100%;\r\n  border-radius: 4px;\r\n  margin-bottom: 4px;\r\n\r\n  border: 0;\r\n  -webkit-appearance: none;\r\n  ${(props) =>\r\n    props.withoutBorder\r\n      ? `-webkit-box-shadow: none;\r\n      -moz-box-shadow: none;\r\n      box-shadow: none;\r\n      `\r\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};\r\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};\r\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};`}\r\n  background-color: #fff;\r\n  box-sizing: border-box;\r\n  padding: 0 ${props => 16 + (props.extraRightPadding ?? 0)}px 0 16px !important;\r\n  text-overflow: ellipsis;\r\n\r\n  outline: none;\r\n  overflow: hidden;\r\n  position: relative;\r\n\r\n  font-size: 16px;\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    font-size: 18px;\r\n    line-height: 18px;\r\n    height: 56px;\r\n    padding: 0 16px !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    font-size: 16px;\r\n    height: 48px;\r\n    &::placeholder {\r\n      font-size: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    font-size: 18px;\r\n    height: 56px;\r\n    &::placeholder {\r\n      font-size: 18px;\r\n    }\r\n  }\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)} !important;\r\n\r\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\r\n\r\n  &:read-only:not(:disabled) {\r\n    ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\r\n  }\r\n\r\n  &:disabled {\r\n    border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    pointer-events: none;\r\n    box-shadow: none !important;\r\n    outline: none;\r\n    cursor: not-allowed;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  }\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0px 0px 0px 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_400', props.theme)};\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  &:not(.placeholder) {\r\n    line-height: 40px;\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &.show-checkmark.valid {\r\n    background-image: none;\r\n  }\r\n\r\n  &.show-checkmark.pending {\r\n    background-image: none;\r\n  }\r\n`;\r\n\r\nconst ValidationStyling = css`\r\n  &.error-msg {\r\n    ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    text-align: center;\r\n    font-weight: 400;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  &.error-msg {\r\n    padding-top: 8px;\r\n    padding-bottom: 0;\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\r\n    font-weight: 700;\r\n    line-height: 15px;\r\n  }\r\n`;\r\n\r\nexport const Warning = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin-bottom: 4px;\r\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  & * {\r\n    vertical-align: middle;\r\n    display: inline-block;\r\n  }\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n  }\r\n`;\r\nexport const ErrorMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n`;\r\n\r\nconst getStateColor = (type: States, theme: any) => {\r\n  if(type === States.Valid) \r\n    return COLORS.getColor('correct_500', theme);\r\n  else if (type === States.Default)\r\n    return COLORS.getColor('neutral_500', theme);\r\n  else \r\n    return COLORS.getColor('critical_500', theme);\r\n};\r\n  \r\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\r\n  color: ${(props) => getStateColor(props.type, props.theme)};\r\n`;\r\n\r\nexport const NoteMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n`;\r\nexport const AutofilledMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n`;\r\n\r\nexport { ValidationStyling, InputFieldStyling };\r\n\r\nexport const StyledIcon = styled.div`\r\n  border-radius: 50%;\r\n`;\r\n\r\nexport const SearchIconWrapper = styled(StyledIcon)`\r\n  position: absolute;\r\n  border-radius: 50%;\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"styling.js","names":["TooltipTrigger","styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentXSStyling","States","InputWrapper","div","_templateObject","_taggedTemplateLiteral","props","$readOnly","$disabled","$margin","concat","readOnlyState","_templateObject2","getColor","theme","activeErrorMessageState","_templateObject3","InputFieldStyling","input","_templateObject4","$withoutBorder","_props$$extraRightPad","$extraRightPadding","Italic","MEDIUM","$activeErrorMessage","$suppressReadOnlyStyles","ValidationStyling","_templateObject5","Regular","Warning","_templateObject6","ErrorMessage","_templateObject7","getStateColor","type","Valid","Default","ValidationMessage","_templateObject8","NoteMessage","_templateObject9","AutofilledMessage","_templateObject10","StyledIcon","_templateObject11","SearchIconWrapper","_templateObject12"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\nimport styled, { css } from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\r\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\r\nimport {Size, States} from '../types';\r\n\r\nexport const InputWrapper = styled.div<{ $readOnly?: boolean; $disabled?: boolean; $margin?: string }>`\r\n  outline: none;\r\n  ${(props) => (props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '')};\r\n  ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n  position: relative;\r\n  \r\n  ${TooltipTrigger('hover')}\r\n\r\n`;\r\n\r\nexport const readOnlyState = css`\r\n  background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)} !important;\r\n  pointer-events: none;\r\n  outline: none;\r\n  cursor: not-allowed;\r\n`;\r\nexport const activeErrorMessageState = css`\r\n  box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_400', props.theme)};\r\n`;\r\n\r\nconst InputFieldStyling = styled.input<{\r\n  $activeErrorMessage?: boolean;\r\n  $active?: boolean;\r\n  $withoutBorder?: boolean;\r\n  $size?: string;\r\n  $suppressReadOnlyStyles?: boolean;\r\n  $extraRightPadding?: number;\r\n}>`\r\n  height: 48px;\r\n  width: 100%;\r\n  border-radius: 4px;\r\n  margin-bottom: 4px;\r\n\r\n  border: 0;\r\n  -webkit-appearance: none;\r\n  ${(props) =>\r\n    props.$withoutBorder\r\n      ? `-webkit-box-shadow: none;\r\n      -moz-box-shadow: none;\r\n      box-shadow: none;\r\n      `\r\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};\r\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};\r\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.getColor('neutral_400', props.theme)};`}\r\n  background-color: #fff;\r\n  box-sizing: border-box;\r\n  padding: 0 ${props => 16 + (props.$extraRightPadding ?? 0)}px 0 16px !important;\r\n  text-overflow: ellipsis;\r\n\r\n  outline: none;\r\n  overflow: hidden;\r\n  position: relative;\r\n\r\n  font-size: 16px;\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    font-size: 18px;\r\n    line-height: 18px;\r\n    height: 56px;\r\n    padding: 0 16px !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    font-size: 16px;\r\n    height: 48px;\r\n    &::placeholder {\r\n      font-size: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    font-size: 18px;\r\n    height: 56px;\r\n    &::placeholder {\r\n      font-size: 18px;\r\n    }\r\n  }\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)} !important;\r\n\r\n  ${(props) => (props.$activeErrorMessage ? activeErrorMessageState : '')}\r\n\r\n  &:read-only:not(:disabled) {\r\n    ${(props) => (props.$suppressReadOnlyStyles ? '' : readOnlyState)}\r\n  }\r\n\r\n  &:disabled {\r\n    border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    pointer-events: none;\r\n    box-shadow: none !important;\r\n    outline: none;\r\n    cursor: not-allowed;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n  }\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0px 0px 0px 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_400', props.theme)};\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  &:not(.placeholder) {\r\n    line-height: 40px;\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &.show-checkmark.valid {\r\n    background-image: none;\r\n  }\r\n\r\n  &.show-checkmark.pending {\r\n    background-image: none;\r\n  }\r\n`;\r\n\r\nconst ValidationStyling = css`\r\n  &.error-msg {\r\n    ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    text-align: center;\r\n    font-weight: 400;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  &.error-msg {\r\n    padding-top: 8px;\r\n    padding-bottom: 0;\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\r\n    font-weight: 700;\r\n    line-height: 15px;\r\n  }\r\n`;\r\n\r\nexport const Warning = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  margin-bottom: 4px;\r\n  ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n\r\n  svg {\r\n    width: 16px;\r\n    height: 16px;\r\n  }\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 16px;\r\n      height: 16px;\r\n    }\r\n  }\r\n  &.medium {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    svg {\r\n      width: 20px;\r\n      height: 20px;\r\n    }\r\n  }\r\n\r\n  & * {\r\n    vertical-align: middle;\r\n    display: inline-block;\r\n  }\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n  }\r\n`;\r\nexport const ErrorMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n`;\r\n\r\nconst getStateColor = (type: States, theme: any) => {\r\n  if(type === States.Valid) \r\n    return COLORS.getColor('correct_500', theme);\r\n  else if (type === States.Default)\r\n    return COLORS.getColor('neutral_500', theme);\r\n  else \r\n    return COLORS.getColor('critical_500', theme);\r\n};\r\n  \r\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\r\n  color: ${(props) => getStateColor(props.type, props.theme)};\r\n`;\r\n\r\nexport const NoteMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n`;\r\nexport const AutofilledMessage = styled(Warning)`\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n`;\r\n\r\nexport { ValidationStyling, InputFieldStyling };\r\n\r\nexport const StyledIcon = styled.div`\r\n  border-radius: 50%;\r\n`;\r\n\r\nexport const SearchIconWrapper = styled(StyledIcon)`\r\n  position: absolute;\r\n  border-radius: 50%;\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Layouts/index.cjs

@@ -22,29 +22,29 @@ var GRID = {
   }
 };
 var PageWidth = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: block;\n  margin: ", ";\n  ", "\n\n  ", " {\n    margin: ", ";\n    ", "\n  }\n\n  ", " {\n    margin: ", ";\n    ", "\n  }\n\n  ", " {\n    max-width: ", ";\n\n    margin: 32px auto 128px;\n    ", "\n  }\n"])), GRID.GUTTER.SMALL, function (props) {
-  return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
+  return props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;';
 }, _styles.BREAKPOINTS.MEDIUM, GRID.GUTTER.MEDIUM, function (props) {
-  return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
+  return props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;';
 }, _styles.BREAKPOINTS.LARGE, GRID.GUTTER.LARGE, function (props) {
-  return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
+  return props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;';
 }, _styles.BREAKPOINTS.LARGE, function (props) {
-  return props.useMaxWidth ? props.maxWidth ? 'min(100% - 128px,' + props.maxWidth + 'px)' : 'calc(100% - 128px)' : 'calc(1600px - 128px)';
+  return props.$useMaxWidth ? props.$maxWidth ? 'min(100% - 128px,' + props.$maxWidth + 'px)' : 'calc(100% - 128px)' : 'calc(1600px - 128px)';
 }, function (props) {
-  return props.unsetMargin && 'margin-top: 0; margin-bottom: 0;';
+  return props.$unsetMargin && 'margin-top: 0; margin-bottom: 0;';
 });
 exports.PageWidth = PageWidth;
 var Columns = _styledComponents["default"].section(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  display: grid;\n  grid-gap: ", ";\n  word-break: break-word; /* Prevent long words from breaking the layout \u2013 consider making this rule global */\n\n  ", " {\n    grid-template-columns: ", ";\n    -ms-grid-columns: ", ";\n    grid-gap: ", ";\n  }\n\n  ", " {\n    grid-gap: ", ";\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ", ";\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ", ";\n  }\n"])), function (props) {
-  return props.gap || GRID.GAP.SMALL;
+  return props.$gap || GRID.GAP.SMALL;
 }, _styles.BREAKPOINTS.MEDIUM, function (props) {
-  return props.columns;
+  return props.$columns;
 }, function (props) {
-  return props.columns;
+  return props.$columns;
 }, function (props) {
-  return props.gap || GRID.GAP.MEDIUM;
+  return props.$gap || GRID.GAP.MEDIUM;
 }, _styles.BREAKPOINTS.LARGE, function (props) {
-  return props.gap || GRID.GAP.LARGE;
+  return props.$gap || GRID.GAP.LARGE;
 }, GRID.GAP.MEDIUM, function (props) {
-  return props.printColumns || 'none';
+  return props.$printColumns || 'none';
 });
 exports.Columns = Columns;
 //# sourceMappingURL=index.cjs.map