@laerdal/life-react-components 5.1.0 → 6.0.0-dev.1.full

package/dist/InputFields/TextField.d.ts

@@ -1,154 +1,154 @@
-import * as React from 'react';
-import { Size, States, Testable } from '../types';
-import { TextFieldNote } from './types';
-export type TextFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id' | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'> & {
-    /**
-       * Optional. The ID of the text field.
-       */
-    id?: string;
-    /**
-      * Optional. A boolean indicating whether the text field is disabled.
-      */
-    disabled?: boolean;
-    /**
-      * Optional. A boolean indicating whether the text field is read-only.
-      */
-    readOnly?: boolean;
-    /**
-      * Optional. A function to be called when the text in the text field changes.
-      * It should take a string representing the new text.
-      */
-    onChange?: (text: string) => void;
-    /**
-      * Optional. The current value of the text field.
-      */
-    value?: string;
-    /**
-      * Optional. The validation message to be displayed when the text field is in an error state.
-      */
-    validationMessage?: string;
-    /**
-      * Optional. The type of the text field. Can be any valid HTML input type.
-      */
-    type?: string;
-    /**
-      * Optional. The state of the text field. Can be 'Invalid' or 'Valid'.
-      */
-    state?: States.Invalid | States.Valid;
-    /**
-      * Optional. The autocomplete attribute of the text field. Can be any valid HTML autocomplete value.
-      */
-    autoComplete?: string;
-    /**
-      * Optional. The placeholder text to be displayed in the text field when it is empty.
-      */
-    placeholder?: string;
-    /**
-      * Optional. A boolean indicating whether the text field is required.
-      */
-    required?: boolean;
-    /**
-      * Optional. The pattern attribute of the text field. Can be any valid HTML pattern value.
-      */
-    pattern?: string;
-    /**
-      * Optional. The maximum length of the text that can be entered in the text field.
-      */
-    maxLength?: number;
-    /**
-      * Optional. A boolean indicating whether the text field should be displayed without a border.
-      */
-    withoutBorder?: boolean;
-    /**
-      * Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.
-      */
-    overflowTooltipPosition?: 'top' | 'bottom';
-    /**
-      * Optional. The size of the text field. Can be 'Small' or 'Medium'.
-      */
-    size?: Size.Small | Size.Medium;
-    /**
-      * Optional. The margin of the text field. Can be any valid CSS margin value.
-      */
-    margin?: string;
-    /**
-      * Optional. A note to be displayed below the text field.
-      */
-    note?: TextFieldNote;
-};
-declare const TextField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "id" | "onChange" | "size" | "disabled" | "pattern" | "type" | "value" | "autoComplete" | "maxLength" | "readOnly"> & {
-    /**
-       * Optional. The ID of the text field.
-       */
-    id?: string | undefined;
-    /**
-      * Optional. A boolean indicating whether the text field is disabled.
-      */
-    disabled?: boolean | undefined;
-    /**
-      * Optional. A boolean indicating whether the text field is read-only.
-      */
-    readOnly?: boolean | undefined;
-    /**
-      * Optional. A function to be called when the text in the text field changes.
-      * It should take a string representing the new text.
-      */
-    onChange?: ((text: string) => void) | undefined;
-    /**
-      * Optional. The current value of the text field.
-      */
-    value?: string | undefined;
-    /**
-      * Optional. The validation message to be displayed when the text field is in an error state.
-      */
-    validationMessage?: string | undefined;
-    /**
-      * Optional. The type of the text field. Can be any valid HTML input type.
-      */
-    type?: string | undefined;
-    /**
-      * Optional. The state of the text field. Can be 'Invalid' or 'Valid'.
-      */
-    state?: States.Valid | States.Invalid | undefined;
-    /**
-      * Optional. The autocomplete attribute of the text field. Can be any valid HTML autocomplete value.
-      */
-    autoComplete?: string | undefined;
-    /**
-      * Optional. The placeholder text to be displayed in the text field when it is empty.
-      */
-    placeholder?: string | undefined;
-    /**
-      * Optional. A boolean indicating whether the text field is required.
-      */
-    required?: boolean | undefined;
-    /**
-      * Optional. The pattern attribute of the text field. Can be any valid HTML pattern value.
-      */
-    pattern?: string | undefined;
-    /**
-      * Optional. The maximum length of the text that can be entered in the text field.
-      */
-    maxLength?: number | undefined;
-    /**
-      * Optional. A boolean indicating whether the text field should be displayed without a border.
-      */
-    withoutBorder?: boolean | undefined;
-    /**
-      * Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.
-      */
-    overflowTooltipPosition?: "bottom" | "top" | undefined;
-    /**
-      * Optional. The size of the text field. Can be 'Small' or 'Medium'.
-      */
-    size?: Size.Small | Size.Medium | undefined;
-    /**
-      * Optional. The margin of the text field. Can be any valid CSS margin value.
-      */
-    margin?: string | undefined;
-    /**
-      * Optional. A note to be displayed below the text field.
-      */
-    note?: TextFieldNote | undefined;
-} & React.RefAttributes<HTMLInputElement>>;
-export default TextField;
+import * as React from 'react';
+import { Size, States, Testable } from '../types';
+import { TextFieldNote } from './types';
+export type TextFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id' | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'> & {
+    /**
+       * Optional. The ID of the text field.
+       */
+    id?: string;
+    /**
+      * Optional. A boolean indicating whether the text field is disabled.
+      */
+    disabled?: boolean;
+    /**
+      * Optional. A boolean indicating whether the text field is read-only.
+      */
+    readOnly?: boolean;
+    /**
+      * Optional. A function to be called when the text in the text field changes.
+      * It should take a string representing the new text.
+      */
+    onChange?: (text: string) => void;
+    /**
+      * Optional. The current value of the text field.
+      */
+    value?: string;
+    /**
+      * Optional. The validation message to be displayed when the text field is in an error state.
+      */
+    validationMessage?: string;
+    /**
+      * Optional. The type of the text field. Can be any valid HTML input type.
+      */
+    type?: string;
+    /**
+      * Optional. The state of the text field. Can be 'Invalid' or 'Valid'.
+      */
+    state?: States.Invalid | States.Valid;
+    /**
+      * Optional. The autocomplete attribute of the text field. Can be any valid HTML autocomplete value.
+      */
+    autoComplete?: string;
+    /**
+      * Optional. The placeholder text to be displayed in the text field when it is empty.
+      */
+    placeholder?: string;
+    /**
+      * Optional. A boolean indicating whether the text field is required.
+      */
+    required?: boolean;
+    /**
+      * Optional. The pattern attribute of the text field. Can be any valid HTML pattern value.
+      */
+    pattern?: string;
+    /**
+      * Optional. The maximum length of the text that can be entered in the text field.
+      */
+    maxLength?: number;
+    /**
+      * Optional. A boolean indicating whether the text field should be displayed without a border.
+      */
+    withoutBorder?: boolean;
+    /**
+      * Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.
+      */
+    overflowTooltipPosition?: 'top' | 'bottom';
+    /**
+      * Optional. The size of the text field. Can be 'Small' or 'Medium'.
+      */
+    size?: Size.Small | Size.Medium;
+    /**
+      * Optional. The margin of the text field. Can be any valid CSS margin value.
+      */
+    margin?: string;
+    /**
+      * Optional. A note to be displayed below the text field.
+      */
+    note?: TextFieldNote;
+};
+declare const TextField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "id" | "onChange" | "size" | "disabled" | "pattern" | "type" | "value" | "autoComplete" | "maxLength" | "readOnly"> & {
+    /**
+       * Optional. The ID of the text field.
+       */
+    id?: string;
+    /**
+      * Optional. A boolean indicating whether the text field is disabled.
+      */
+    disabled?: boolean;
+    /**
+      * Optional. A boolean indicating whether the text field is read-only.
+      */
+    readOnly?: boolean;
+    /**
+      * Optional. A function to be called when the text in the text field changes.
+      * It should take a string representing the new text.
+      */
+    onChange?: (text: string) => void;
+    /**
+      * Optional. The current value of the text field.
+      */
+    value?: string;
+    /**
+      * Optional. The validation message to be displayed when the text field is in an error state.
+      */
+    validationMessage?: string;
+    /**
+      * Optional. The type of the text field. Can be any valid HTML input type.
+      */
+    type?: string;
+    /**
+      * Optional. The state of the text field. Can be 'Invalid' or 'Valid'.
+      */
+    state?: States.Invalid | States.Valid;
+    /**
+      * Optional. The autocomplete attribute of the text field. Can be any valid HTML autocomplete value.
+      */
+    autoComplete?: string;
+    /**
+      * Optional. The placeholder text to be displayed in the text field when it is empty.
+      */
+    placeholder?: string;
+    /**
+      * Optional. A boolean indicating whether the text field is required.
+      */
+    required?: boolean;
+    /**
+      * Optional. The pattern attribute of the text field. Can be any valid HTML pattern value.
+      */
+    pattern?: string;
+    /**
+      * Optional. The maximum length of the text that can be entered in the text field.
+      */
+    maxLength?: number;
+    /**
+      * Optional. A boolean indicating whether the text field should be displayed without a border.
+      */
+    withoutBorder?: boolean;
+    /**
+      * Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.
+      */
+    overflowTooltipPosition?: "top" | "bottom";
+    /**
+      * Optional. The size of the text field. Can be 'Small' or 'Medium'.
+      */
+    size?: Size.Small | Size.Medium;
+    /**
+      * Optional. The margin of the text field. Can be any valid CSS margin value.
+      */
+    margin?: string;
+    /**
+      * Optional. A note to be displayed below the text field.
+      */
+    note?: TextFieldNote;
+} & React.RefAttributes<HTMLInputElement>>;
+export default TextField;

package/dist/InputFields/TextField.js

@@ -40,7 +40,7 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const elementRef = useFocusVisibleRef();
   const theme = useTheme();
   React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);
-  const cls = "".concat(state || (validationMessage ? States.Invalid : ''), " ").concat(size || '');
+  const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsxs(InputWrapper, {
       $readOnly: readOnly,
@@ -63,10 +63,7 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         placeholder: disabled ? undefined : placeholder,
         disabled: disabled,
         readOnly: readOnly,
-        onChange: e => {
-          var _e$target;
-          return onChange && onChange((e === null || e === void 0 || (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '');
-        },
+        onChange: e => onChange && onChange(e?.target?.value || ''),
         $activeErrorMessage: !!validationMessage && state !== States.Valid,
         required: required,
         pattern: pattern,
@@ -83,7 +80,7 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         children: value
       }), validationMessage && /*#__PURE__*/_jsxs(ValidationMessage, {
         className: size || '',
-        type: state !== null && state !== void 0 ? state : States.Invalid,
+        type: state ?? States.Invalid,
         children: [state === States.Valid ? /*#__PURE__*/_jsx(SystemIcons.CheckMark, {
           color: COLORS.getColor('correct_400', theme)
         }) : /*#__PURE__*/_jsx(SystemIcons.TechnicalWarning, {

package/dist/InputFields/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":["React","SystemIcons","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TooltipOverflow","useTheme","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","TextField","forwardRef","_ref","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","overflowTooltipPosition","note","className","dataTestId","rest","_objectWithoutProperties","_excluded","elementRef","theme","useImperativeHandle","current","cls","concat","Invalid","children","$readOnly","$disabled","$margin","onClick","e","preventDefault","_objectSpread","tabIndex","undefined","_e$target","target","$activeErrorMessage","Valid","$withoutBorder","position","input","withArrow","maxWidth","align","CheckMark","color","getColor","TechnicalWarning","icon","message","propTypes","_pt","string","bool","func","number","oneOf"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS} from '../styles';\r\nimport {Size, States, Testable} from '../types';\r\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {TextFieldNote} from './types';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\nimport { useTheme } from 'styled-components';\r\n\r\nexport type TextFieldProps =\r\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id'  | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\r\n  & {\r\n  /**\r\n     * Optional. The ID of the text field.\r\n     */\r\n  id?: string;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field is disabled.\r\n    */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field is read-only.\r\n    */\r\n  readOnly?: boolean;\r\n\r\n  /**\r\n    * Optional. A function to be called when the text in the text field changes.\r\n    * It should take a string representing the new text.\r\n    */\r\n  onChange?: (text: string) => void;\r\n\r\n  /**\r\n    * Optional. The current value of the text field.\r\n    */\r\n  value?: string;\r\n\r\n  /**\r\n    * Optional. The validation message to be displayed when the text field is in an error state.\r\n    */\r\n  validationMessage?: string;\r\n\r\n  /**\r\n    * Optional. The type of the text field. Can be any valid HTML input type.\r\n    */\r\n  type?: string;\r\n\r\n  /**\r\n    * Optional. The state of the text field. Can be 'Invalid' or 'Valid'.\r\n    */\r\n  state?: States.Invalid | States.Valid;\r\n\r\n  /**\r\n    * Optional. The autocomplete attribute of the text field. Can be any valid HTML autocomplete value.\r\n    */\r\n  autoComplete?: string;\r\n\r\n  /**\r\n    * Optional. The placeholder text to be displayed in the text field when it is empty.\r\n    */\r\n  placeholder?: string;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field is required.\r\n    */\r\n  required?: boolean;\r\n\r\n  /**\r\n    * Optional. The pattern attribute of the text field. Can be any valid HTML pattern value.\r\n    */\r\n  pattern?: string;\r\n\r\n  /**\r\n    * Optional. The maximum length of the text that can be entered in the text field.\r\n    */\r\n  maxLength?: number;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field should be displayed without a border.\r\n    */\r\n  withoutBorder?: boolean;\r\n\r\n  /**\r\n    * Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.\r\n    */\r\n  overflowTooltipPosition?: 'top' | 'bottom';\r\n\r\n  /**\r\n    * Optional. The size of the text field. Can be 'Small' or 'Medium'.\r\n    */\r\n  size?: Size.Small | Size.Medium;\r\n\r\n  /**\r\n    * Optional. The margin of the text field. Can be any valid CSS margin value.\r\n    */\r\n  margin?: string;\r\n\r\n  /**\r\n    * Optional. A note to be displayed below the text field.\r\n    */\r\n  note?: TextFieldNote;\r\n};\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(({\r\n                                      id,\r\n                                      disabled,\r\n                                      readOnly,\r\n                                      onChange,\r\n                                      value,\r\n                                      validationMessage,\r\n                                      type,\r\n                                      autoComplete,\r\n                                      placeholder,\r\n                                      required,\r\n                                      pattern,\r\n                                      maxLength,\r\n                                      withoutBorder,\r\n                                      state,\r\n                                      size,\r\n                                      margin,\r\n                                      overflowTooltipPosition,\r\n                                      note,\r\n                                      className,\r\n                                      dataTestId,\r\n                                      ...rest\r\n                                    }: TextFieldProps, ref) => {\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 = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\r\n\r\n  return (\r\n    <>\r\n      <InputWrapper\r\n        $readOnly={readOnly}\r\n        $disabled={disabled}\r\n        $margin={margin}\r\n        onClick={(e: any) => {\r\n          if (disabled || readOnly) {\r\n            e.preventDefault();\r\n          }\r\n        }}>\r\n        <InputFieldStyling\r\n          id={id}\r\n          data-testid={dataTestId}\r\n          ref={elementRef}\r\n          type={type || 'text'}\r\n          value={value}\r\n          className={cls}\r\n          tabIndex={readOnly || disabled ? -1 : 0}\r\n          autoComplete={autoComplete}\r\n          placeholder={disabled ? undefined : placeholder}\r\n          disabled={disabled}\r\n          readOnly={readOnly}\r\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n          $activeErrorMessage={!!validationMessage && state !== States.Valid}\r\n          required={required}\r\n          pattern={pattern}\r\n          maxLength={maxLength}\r\n          $withoutBorder={withoutBorder}\r\n          {...rest}\r\n        />\r\n        <TooltipOverflow value={value} position={overflowTooltipPosition} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\r\n          {value}\r\n        </TooltipOverflow>\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)}/> :\r\n              <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      </InputWrapper>\r\n    </>\r\n  );\r\n});\r\n\r\nexport default TextField;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TextField.js","names":["React","SystemIcons","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TooltipOverflow","useTheme","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","TextField","forwardRef","_ref","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","overflowTooltipPosition","note","className","dataTestId","rest","_objectWithoutProperties","_excluded","elementRef","theme","useImperativeHandle","current","cls","Invalid","children","$readOnly","$disabled","$margin","onClick","e","preventDefault","_objectSpread","tabIndex","undefined","target","$activeErrorMessage","Valid","$withoutBorder","position","input","withArrow","maxWidth","align","CheckMark","color","getColor","TechnicalWarning","icon","message","propTypes","_pt","string","bool","func","number","oneOf"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS} from '../styles';\r\nimport {Size, States, Testable} from '../types';\r\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {TextFieldNote} from './types';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\nimport { useTheme } from 'styled-components';\r\n\r\nexport type TextFieldProps =\r\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id'  | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\r\n  & {\r\n  /**\r\n     * Optional. The ID of the text field.\r\n     */\r\n  id?: string;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field is disabled.\r\n    */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field is read-only.\r\n    */\r\n  readOnly?: boolean;\r\n\r\n  /**\r\n    * Optional. A function to be called when the text in the text field changes.\r\n    * It should take a string representing the new text.\r\n    */\r\n  onChange?: (text: string) => void;\r\n\r\n  /**\r\n    * Optional. The current value of the text field.\r\n    */\r\n  value?: string;\r\n\r\n  /**\r\n    * Optional. The validation message to be displayed when the text field is in an error state.\r\n    */\r\n  validationMessage?: string;\r\n\r\n  /**\r\n    * Optional. The type of the text field. Can be any valid HTML input type.\r\n    */\r\n  type?: string;\r\n\r\n  /**\r\n    * Optional. The state of the text field. Can be 'Invalid' or 'Valid'.\r\n    */\r\n  state?: States.Invalid | States.Valid;\r\n\r\n  /**\r\n    * Optional. The autocomplete attribute of the text field. Can be any valid HTML autocomplete value.\r\n    */\r\n  autoComplete?: string;\r\n\r\n  /**\r\n    * Optional. The placeholder text to be displayed in the text field when it is empty.\r\n    */\r\n  placeholder?: string;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field is required.\r\n    */\r\n  required?: boolean;\r\n\r\n  /**\r\n    * Optional. The pattern attribute of the text field. Can be any valid HTML pattern value.\r\n    */\r\n  pattern?: string;\r\n\r\n  /**\r\n    * Optional. The maximum length of the text that can be entered in the text field.\r\n    */\r\n  maxLength?: number;\r\n\r\n  /**\r\n    * Optional. A boolean indicating whether the text field should be displayed without a border.\r\n    */\r\n  withoutBorder?: boolean;\r\n\r\n  /**\r\n    * Optional. The position of the overflow tooltip. Can be 'top' or 'bottom'.\r\n    */\r\n  overflowTooltipPosition?: 'top' | 'bottom';\r\n\r\n  /**\r\n    * Optional. The size of the text field. Can be 'Small' or 'Medium'.\r\n    */\r\n  size?: Size.Small | Size.Medium;\r\n\r\n  /**\r\n    * Optional. The margin of the text field. Can be any valid CSS margin value.\r\n    */\r\n  margin?: string;\r\n\r\n  /**\r\n    * Optional. A note to be displayed below the text field.\r\n    */\r\n  note?: TextFieldNote;\r\n};\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(({\r\n                                      id,\r\n                                      disabled,\r\n                                      readOnly,\r\n                                      onChange,\r\n                                      value,\r\n                                      validationMessage,\r\n                                      type,\r\n                                      autoComplete,\r\n                                      placeholder,\r\n                                      required,\r\n                                      pattern,\r\n                                      maxLength,\r\n                                      withoutBorder,\r\n                                      state,\r\n                                      size,\r\n                                      margin,\r\n                                      overflowTooltipPosition,\r\n                                      note,\r\n                                      className,\r\n                                      dataTestId,\r\n                                      ...rest\r\n                                    }: TextFieldProps, ref) => {\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 = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\r\n\r\n  return (\r\n    <>\r\n      <InputWrapper\r\n        $readOnly={readOnly}\r\n        $disabled={disabled}\r\n        $margin={margin}\r\n        onClick={(e: any) => {\r\n          if (disabled || readOnly) {\r\n            e.preventDefault();\r\n          }\r\n        }}>\r\n        <InputFieldStyling\r\n          id={id}\r\n          data-testid={dataTestId}\r\n          ref={elementRef}\r\n          type={type || 'text'}\r\n          value={value}\r\n          className={cls}\r\n          tabIndex={readOnly || disabled ? -1 : 0}\r\n          autoComplete={autoComplete}\r\n          placeholder={disabled ? undefined : placeholder}\r\n          disabled={disabled}\r\n          readOnly={readOnly}\r\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n          $activeErrorMessage={!!validationMessage && state !== States.Valid}\r\n          required={required}\r\n          pattern={pattern}\r\n          maxLength={maxLength}\r\n          $withoutBorder={withoutBorder}\r\n          {...rest}\r\n        />\r\n        <TooltipOverflow value={value} position={overflowTooltipPosition} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\r\n          {value}\r\n        </TooltipOverflow>\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)}/> :\r\n              <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      </InputWrapper>\r\n    </>\r\n  );\r\n});\r\n\r\nexport default TextField;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/Textarea.cjs

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("../styles");
 var _styling = require("./styling");
@@ -17,7 +16,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["id", "placeholder", "state", "value", "size", "disabled", "validationMessage", "onChange", "margin", "autoHeight", "note", "required", "className", "dataTestId"];
-var _templateObject, _templateObject2;
 /**
  * Import React libraries.
  */
@@ -35,8 +33,83 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-const TextareaWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  ", "\n"])), props => props.$margin ? "margin: ".concat(props.$margin, ";") : '');
-const TextArea = _styledComponents.default.textarea(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), props => _styles.COLORS.getColor('white', props.theme), props => _styles.COLORS.getColor('neutral_400', props.theme), props => props.$autoHeight ? 'none' : '', props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme)), props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme)), props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme)), props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme)), props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme)), props => _styles.COLORS.getColor('primary_800', props.theme), _styles.focusStyles, props => _styles.COLORS.getColor('critical_500', props.theme), props => _styles.COLORS.getColor('correct_500', props.theme), props => _styles.COLORS.getColor('primary_700', props.theme), props => _styles.COLORS.getColor('primary_800', props.theme), _styling.readOnlyState, props => _styles.COLORS.getColor('neutral_100', props.theme), props => _styles.COLORS.getColor('neutral_300', props.theme), props => _styles.COLORS.getColor('neutral_300', props.theme), props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme)));
+const TextareaWrapper = _styledComponents.default.div`
+  width: 100%;
+  ${props => props.$margin ? `margin: ${props.$margin};` : ''}
+`;
+const TextArea = _styledComponents.default.textarea`
+  display: block;
+  background: ${props => _styles.COLORS.getColor('white', props.theme)};
+  border-radius: 4px;
+  outline: none;
+  margin-bottom: 4px;
+  padding: 16px;
+  border: none;
+  box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.getColor('neutral_400', props.theme)};
+
+  resize: ${props => props.$autoHeight ? 'none' : ''};
+
+  ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+  &.small {
+    ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+    width: 304px;
+
+    &::placeholder {
+      ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme))}
+    }
+  }
+
+  &.medium {
+    ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+    &::placeholder {
+      ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme))}
+    }
+    width: 344px;
+  }
+
+  &:focus:not(.focus-visible) {
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+  }
+
+  &.focus-visible {
+    ${_styles.focusStyles}
+  }
+
+  &.invalid {
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.getColor('critical_500', props.theme)};
+  }
+
+  &.valid {
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.getColor('correct_500', props.theme)};
+  }
+
+  &:hover {
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+  }
+
+  &.active {
+    box-shadow: inset 0 0 0 2px ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+  }
+
+  &:read-only:not(:disabled) {
+    ${_styling.readOnlyState}
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    border: 1px solid ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+    box-shadow: none !important;
+    color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)} !important;
+
+    &::placeholder {
+      color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+    }
+  }
+
+  &::placeholder {
+    ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme))}
+  }
+`;
 const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       id,
@@ -58,7 +131,7 @@ const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const elementRef = (0, _common.useFocusVisibleRef)();
   const theme = (0, _styledComponents.useTheme)();
   React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);
-  const cls = "".concat(size, " ").concat(state || (validationMessage ? _types.States.Invalid : ''), " ").concat(className || '');
+  const cls = `${size} ${state || (validationMessage ? _types.States.Invalid : '')} ${className || ''}`;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TextareaWrapper, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TextArea, _objectSpread({
       id: id,
@@ -69,14 +142,11 @@ const Textarea = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       $autoHeight: autoHeight,
       className: cls,
       disabled: disabled,
-      onChange: e => {
-        var _e$target;
-        return onChange && onChange((e === null || e === void 0 || (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '');
-      },
+      onChange: e => onChange && onChange(e?.target?.value || ''),
       required: required
     }, rest)), validationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ValidationMessage, {
       className: size || '',
-      type: state !== null && state !== void 0 ? state : _types.States.Invalid,
+      type: state ?? _types.States.Invalid,
       children: [state === _types.States.Valid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.CheckMark, {
         color: _styles.COLORS.getColor('correct_400', theme)
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.TechnicalWarning, {

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","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","TextareaWrapper","styled","div","_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":[]}
+{"version":3,"file":"Textarea.cjs","names":["React","_interopRequireWildcard","require","_styles","_styling","_types","_icons","_styledComponents","_common","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","TextareaWrapper","styled","div","props","$margin","TextArea","textarea","COLORS","getColor","theme","$autoHeight","ComponentMStyling","ComponentTextStyle","Regular","ComponentSStyling","Italic","focusStyles","readOnlyState","Textarea","forwardRef","_ref","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","margin","autoHeight","note","required","className","dataTestId","rest","_objectWithoutProperties2","elementRef","useFocusVisibleRef","useTheme","useImperativeHandle","current","cls","States","Invalid","jsxs","children","jsx","undefined","target","ValidationMessage","type","Valid","SystemIcons","CheckMark","color","TechnicalWarning","NoteMessage","icon","message","_default","exports"],"sources":["../../src/InputFields/Textarea.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {COLORS, ComponentSStyling, focusStyles} from '../styles';\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from './styling';\r\nimport { States } from '../types';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport { SystemIcons } from '../icons';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\r\nimport { TextareaProps, TextFieldNote } from './types';\r\nimport {useFocusVisibleRef} from \"../common\";\r\n\r\n// Add component-specific styles.\r\nconst TextareaWrapper = styled.div<{ $margin?: string }>`\r\n  width: 100%;\r\n  ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n`;\r\nconst TextArea = styled.textarea<{ $autoHeight?: boolean }>`\r\n  display: block;\r\n  background: ${props => COLORS.getColor('white', props.theme)};\r\n  border-radius: 4px;\r\n  outline: none;\r\n  margin-bottom: 4px;\r\n  padding: 16px;\r\n  border: none;\r\n  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n\r\n  resize: ${(props) => (props.$autoHeight ? 'none' : '')};\r\n\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    width: 304px;\r\n\r\n    &::placeholder {\r\n      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    &::placeholder {\r\n      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n    }\r\n    width: 344px;\r\n  }\r\n\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &.focus-visible {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.invalid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_500', props.theme)};\r\n  }\r\n\r\n  &.valid {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('correct_500', props.theme)};\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &.active {\r\n    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &:read-only:not(:disabled) {\r\n    ${readOnlyState}\r\n  }\r\n\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n    border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    box-shadow: none !important;\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n\r\n    &::placeholder {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &::placeholder {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_500', props.theme))}\r\n  }\r\n`;\r\n\r\nconst Textarea = React.forwardRef<any, TextareaProps>(({\r\n  id,\r\n  placeholder,\r\n  state,\r\n  value,\r\n  size,\r\n  disabled,\r\n  validationMessage,\r\n  onChange,\r\n  margin,\r\n  autoHeight,\r\n  note,\r\n  required,\r\n  className,\r\n  dataTestId,\r\n  ...rest\r\n}: TextareaProps, ref) => {\r\n\r\n  const elementRef = useFocusVisibleRef();\r\n  const theme = useTheme();\r\n\r\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\r\n  return (\r\n    <TextareaWrapper>\r\n      <TextArea\r\n        id={id}\r\n        data-testid={dataTestId}\r\n        ref={elementRef}\r\n        value={value}\r\n        placeholder={disabled ? undefined : placeholder}\r\n        $autoHeight={autoHeight}\r\n        className={cls}\r\n        disabled={disabled}\r\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n        required={required}\r\n        {...rest}\r\n      />\r\n      {validationMessage && (\r\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n          {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.getColor('correct_400', theme)} /> : <SystemIcons.TechnicalWarning color={COLORS.getColor('critical_400', theme)} />}\r\n          <span>{validationMessage}</span>\r\n        </ValidationMessage>\r\n      )}\r\n      {note && !disabled && (\r\n        <NoteMessage className={size}>\r\n          {note.icon}\r\n          <span>{note.message}</span>\r\n        </NoteMessage>\r\n      )}\r\n    </TextareaWrapper>\r\n  );\r\n});\r\n\r\nexport default Textarea;\r\n"],"mappings":";;;;;;;;;AAGA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AAMA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAKA,IAAAI,MAAA,GAAAJ,OAAA;AAKA,IAAAK,iBAAA,GAAAN,uBAAA,CAAAC,OAAA;AAGA,IAAAM,OAAA,GAAAN,OAAA;AAA6C,IAAAO,WAAA,GAAAP,OAAA;AAAA,MAAAQ,SAAA;AAxB7C;AACA;AACA;AAIA;AACA;AACA;AAKA;AACA;AACA;AAGA;AACA;AACA;AAMA;AAAA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAX,wBAAAW,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAW,QAAAnB,CAAA,EAAAE,CAAA,QAAAC,CAAA,GAAAQ,MAAA,CAAAS,IAAA,CAAApB,CAAA,OAAAW,MAAA,CAAAU,qBAAA,QAAAC,CAAA,GAAAX,MAAA,CAAAU,qBAAA,CAAArB,CAAA,GAAAE,CAAA,KAAAoB,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAArB,CAAA,WAAAS,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAE,CAAA,EAAAsB,UAAA,OAAArB,CAAA,CAAAsB,IAAA,CAAAC,KAAA,CAAAvB,CAAA,EAAAmB,CAAA,YAAAnB,CAAA;AAAA,SAAAwB,cAAA3B,CAAA,aAAAE,CAAA,MAAAA,CAAA,GAAA0B,SAAA,CAAAC,MAAA,EAAA3B,CAAA,UAAAC,CAAA,WAAAyB,SAAA,CAAA1B,CAAA,IAAA0B,SAAA,CAAA1B,CAAA,QAAAA,CAAA,OAAAiB,OAAA,CAAAR,MAAA,CAAAR,CAAA,OAAA2B,OAAA,WAAA5B,CAAA,QAAA6B,gBAAA,CAAA1B,OAAA,EAAAL,CAAA,EAAAE,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAS,MAAA,CAAAqB,yBAAA,GAAArB,MAAA,CAAAsB,gBAAA,CAAAjC,CAAA,EAAAW,MAAA,CAAAqB,yBAAA,CAAA7B,CAAA,KAAAgB,OAAA,CAAAR,MAAA,CAAAR,CAAA,GAAA2B,OAAA,WAAA5B,CAAA,IAAAS,MAAA,CAAAC,cAAA,CAAAZ,CAAA,EAAAE,CAAA,EAAAS,MAAA,CAAAE,wBAAA,CAAAV,CAAA,EAAAD,CAAA,iBAAAF,CAAA;AACA,MAAMkC,eAAe,GAAGC,yBAAM,CAACC,GAAyB;AACxD;AACA,IAAKC,KAAK,IAAMA,KAAK,CAACC,OAAO,GAAG,WAAWD,KAAK,CAACC,OAAO,GAAG,GAAG,EAAG;AACjE,CAAC;AACD,MAAMC,QAAQ,GAAGJ,yBAAM,CAACK,QAAmC;AAC3D;AACA,gBAAgBH,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC;AAC9D;AACA;AACA;AACA;AACA;AACA,gCAAgCN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AACpF;AACA,YAAaN,KAAK,IAAMA,KAAK,CAACO,WAAW,GAAG,MAAM,GAAG,EAAG;AACxD;AACA,IAAIP,KAAK,IAAI,IAAAQ,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEN,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC;AACjG;AACA,MAAMN,KAAK,IAAI,IAAAW,yBAAiB,EAACF,0BAAkB,CAACC,OAAO,EAAEN,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC;AACnG;AACA;AACA;AACA,QAAQN,KAAK,IAAI,IAAAW,yBAAiB,EAACF,0BAAkB,CAACG,MAAM,EAAER,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC;AAC1G;AACA;AACA;AACA;AACA,MAAMN,KAAK,IAAI,IAAAQ,yBAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAEN,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC;AACnG;AACA,QAAQN,KAAK,IAAI,IAAAQ,yBAAiB,EAACC,0BAAkB,CAACG,MAAM,EAAER,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC;AAC1G;AACA;AACA;AACA;AACA;AACA,kCAAkCN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AACtF;AACA;AACA;AACA,MAAMO,mBAAW;AACjB;AACA;AACA;AACA,kCAAkCb,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEL,KAAK,CAACM,KAAK,CAAC;AACvF;AACA;AACA;AACA,kCAAkCN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AACtF;AACA;AACA;AACA,kCAAkCN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AACtF;AACA;AACA;AACA,kCAAkCN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AACtF;AACA;AACA;AACA,MAAMQ,sBAAa;AACnB;AACA;AACA;AACA;AACA,wBAAwBd,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AAC5E;AACA,aAAaN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AACjE;AACA;AACA,eAAeN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AACnE;AACA;AACA;AACA;AACA,MAAMN,KAAK,IAAI,IAAAQ,yBAAiB,EAACC,0BAAkB,CAACG,MAAM,EAAER,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC;AACxG;AACA,CAAC;AAED,MAAMS,QAAQ,gBAAGhE,KAAK,CAACiE,UAAU,CAAqB,CAAAC,IAAA,EAgBpCC,GAAG,KAAK;EAAA,IAhB6B;MACrDC,EAAE;MACFC,WAAW;MACXC,KAAK;MACLC,KAAK;MACLC,IAAI;MACJC,QAAQ;MACRC,iBAAiB;MACjBC,QAAQ;MACRC,MAAM;MACNC,UAAU;MACVC,IAAI;MACJC,QAAQ;MACRC,SAAS;MACTC;IAEa,CAAC,GAAAf,IAAA;IADXgB,IAAI,OAAAC,yBAAA,CAAAlE,OAAA,EAAAiD,IAAA,EAAAxD,SAAA;EAGP,MAAM0E,UAAU,GAAG,IAAAC,0BAAkB,EAAC,CAAC;EACvC,MAAM9B,KAAK,GAAG,IAAA+B,0BAAQ,EAAC,CAAC;EAExBtF,KAAK,CAACuF,mBAAmB,CAACpB,GAAG,EAAE,MAAMiB,UAAU,CAACI,OAAO,EAAE,CAACJ,UAAU,CAAC,CAAC;EAEtE,MAAMK,GAAG,GAAG,GAAGjB,IAAI,IAAIF,KAAK,KAAKI,iBAAiB,GAAGgB,aAAM,CAACC,OAAO,GAAG,EAAE,CAAC,IAAIX,SAAS,IAAI,EAAE,EAAE;EAC9F,oBACE,IAAAvE,WAAA,CAAAmF,IAAA,EAAC9C,eAAe;IAAA+C,QAAA,gBACd,IAAApF,WAAA,CAAAqF,GAAA,EAAC3C,QAAQ,EAAAZ,aAAA;MACP6B,EAAE,EAAEA,EAAG;MACP,eAAaa,UAAW;MACxBd,GAAG,EAAEiB,UAAW;MAChBb,KAAK,EAAEA,KAAM;MACbF,WAAW,EAAEI,QAAQ,GAAGsB,SAAS,GAAG1B,WAAY;MAChDb,WAAW,EAAEqB,UAAW;MACxBG,SAAS,EAAES,GAAI;MACfhB,QAAQ,EAAEA,QAAS;MACnBE,QAAQ,EAAG/D,CAAM,IAAK+D,QAAQ,IAAIA,QAAQ,CAAC/D,CAAC,EAAEoF,MAAM,EAAEzB,KAAK,IAAI,EAAE,CAAE;MACnEQ,QAAQ,EAAEA;IAAS,GACfG,IAAI,CACT,CAAC,EACDR,iBAAiB,iBAChB,IAAAjE,WAAA,CAAAmF,IAAA,EAACxF,QAAA,CAAA6F,iBAAiB;MAACjB,SAAS,EAAER,IAAI,IAAI,EAAG;MAAC0B,IAAI,EAAE5B,KAAK,IAAIoB,aAAM,CAACC,OAAQ;MAAAE,QAAA,GACrEvB,KAAK,KAAKoB,aAAM,CAACS,KAAK,gBAAG,IAAA1F,WAAA,CAAAqF,GAAA,EAACxF,MAAA,CAAA8F,WAAW,CAACC,SAAS;QAACC,KAAK,EAAEjD,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEC,KAAK;MAAE,CAAE,CAAC,gBAAG,IAAA9C,WAAA,CAAAqF,GAAA,EAACxF,MAAA,CAAA8F,WAAW,CAACG,gBAAgB;QAACD,KAAK,EAAEjD,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEC,KAAK;MAAE,CAAE,CAAC,eACnL,IAAA9C,WAAA,CAAAqF,GAAA;QAAAD,QAAA,EAAOnB;MAAiB,CAAO,CAAC;IAAA,CACf,CACpB,EACAI,IAAI,IAAI,CAACL,QAAQ,iBAChB,IAAAhE,WAAA,CAAAmF,IAAA,EAACxF,QAAA,CAAAoG,WAAW;MAACxB,SAAS,EAAER,IAAK;MAAAqB,QAAA,GAC1Bf,IAAI,CAAC2B,IAAI,eACV,IAAAhG,WAAA,CAAAqF,GAAA;QAAAD,QAAA,EAAOf,IAAI,CAAC4B;MAAO,CAAO,CAAC;IAAA,CAChB,CACd;EAAA,CACc,CAAC;AAEtB,CAAC,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3F,OAAA,GAEY+C,QAAQ","ignoreList":[]}

package/dist/InputFields/Textarea.d.ts

@@ -1,17 +1,17 @@
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-import { States } from '../types';
-import { TextFieldNote } from './types';
-declare const Textarea: React.ForwardRefExoticComponent<import("../types").Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> & {
-    id: string;
-    state?: States.Valid | States.Invalid | undefined;
-    onChange?: ((text: string) => void) | undefined;
-    validationMessage?: string | undefined;
-    size: import("../types").Size.Small | import("../types").Size.Medium;
-    autoHeight?: boolean | undefined;
-    margin?: string | undefined;
-    note?: TextFieldNote | undefined;
-} & React.RefAttributes<any>>;
-export default Textarea;
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+import { States } from '../types';
+import { TextFieldNote } from './types';
+declare const Textarea: React.ForwardRefExoticComponent<import("../types").Testable & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> & {
+    id: string;
+    state?: States.Invalid | States.Valid;
+    onChange?: (text: string) => void;
+    validationMessage?: string;
+    size: import("../types").Size.Small | import("../types").Size.Medium;
+    autoHeight?: boolean;
+    margin?: string;
+    note?: TextFieldNote;
+} & React.RefAttributes<any>>;
+export default Textarea;