@laerdal/life-react-components 2.0.1-dev.9 → 2.1.0

package/dist/InputFields/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","names":["React","COLORS","Search","SearchIcon","Clear","ClearIcon","TechnicalWarning","ErrorMessage","InputWrapper","SearchIconWrapper","IconButton","SearchBarInput","SearchField","styled","DropdownContent","useClickOutsideRef","ClearIconWrapper","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","useRef","useState","isOpen","setIsOpen","dropdownRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {Search as SearchIcon, Clear as ClearIcon, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport { DropdownContent, DropdownItem } from '../Dropdown';\nimport { useClickOutsideRef } from '../common';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  showDropdown?: boolean;\n  dropdownButtonIcon?: React.ReactNode;\n  dropdownButtonLabel?: string;\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\n  dropdownButtonAction?: () => boolean | void | undefined;\n  searchList?: DropdownItem[];\n  addToSearchList?: (e: DropdownItem) => void;\n  dropdownScrollable?: boolean;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n                                                             id,\n                                                             searchTerm,\n                                                             setSearchTerm,\n                                                             enterSearch,\n                                                             removeSearch,\n                                                             placeholder,\n                                                             performSearchLabel,\n                                                             disabled,\n                                                             validationMessage,\n                                                             onKeyDown,\n                                                             size,\n                                                             margin = '4px 0',\n                                                             showDropdown,\n                                                             dropdownButtonIcon,\n                                                             dropdownButtonLabel,\n                                                             dropdownButtonVariant,\n                                                             dropdownButtonAction,\n                                                             searchList=[],\n                                                             addToSearchList,\n                                                             dropdownScrollable\n                                                           }) => {\n  const containerRef = React.useRef<any>(null);\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  const enteredSearchTerm = (e: any) => {\n    addToSearchList && addToSearchList({value:e.target.value});\n    enterSearch(e);\n  }\n\n  const dropdownAction = () => {\n    if(dropdownButtonAction)\n      dropdownButtonAction();    \n  }\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={'id'} size={size}\n                     ref={containerRef}\n                     searchTerm={searchTerm}\n                     disabled={disabled}\n                     validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enteredSearchTerm}\n            focusParentRefs={[containerRef]}\n            onClick={()=>setIsOpen(!isOpen)}\n            ref={dropdownRef}\n          />\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SearchIcon size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n\n      {showDropdown && <DropdownContent id={'search'}\n                                        containerRef={containerRef}\n          size={size}\n          isButton={false}\n          ariaRolesType=\"input\"\n          customizationProps={{\n            items:searchList,\n            action: dropdownAction,\n            actionLabel: dropdownButtonLabel,\n            actionIcon: dropdownButtonIcon,\n            actionVariant: dropdownButtonVariant,\n            onValueUpdate:(e)=>{},\n            scrollable: dropdownScrollable,\n            pinTopItem: true\n          }}\n          isOpen={isOpen}\n          setIsOpen={setIsOpen}\n          filter={''}\n          selectedValues={searchTerm ? [searchTerm] : []}\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\n          messageOnNoResults={''}\n          focused={null}\n          setFocused={()=>{}}\n        />}\n\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"mappings":"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"}
+{"version":3,"file":"SearchBar.js","names":["React","COLORS","Search","SearchIcon","Clear","ClearIcon","TechnicalWarning","ErrorMessage","InputWrapper","SearchIconWrapper","IconButton","SearchBarInput","SearchField","styled","DropdownContent","useClickOutsideRef","ClearIconWrapper","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","useRef","useState","isOpen","setIsOpen","dropdownRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {Search as SearchIcon, Clear as ClearIcon, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport { DropdownContent, DropdownItem } from '../Dropdown';\nimport { useClickOutsideRef } from '../common';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  showDropdown?: boolean;\n  dropdownButtonIcon?: React.ReactNode;\n  dropdownButtonLabel?: string;\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\n  dropdownButtonAction?: () => boolean | void | undefined;\n  searchList?: DropdownItem[];\n  addToSearchList?: (e: DropdownItem) => void;\n  dropdownScrollable?: boolean;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n                                                             id,\n                                                             searchTerm,\n                                                             setSearchTerm,\n                                                             enterSearch,\n                                                             removeSearch,\n                                                             placeholder,\n                                                             performSearchLabel,\n                                                             disabled,\n                                                             validationMessage,\n                                                             onKeyDown,\n                                                             size,\n                                                             margin = '4px 0',\n                                                             showDropdown,\n                                                             dropdownButtonIcon,\n                                                             dropdownButtonLabel,\n                                                             dropdownButtonVariant,\n                                                             dropdownButtonAction,\n                                                             searchList=[],\n                                                             addToSearchList,\n                                                             dropdownScrollable\n                                                           }) => {\n  const containerRef = React.useRef<any>(null);\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  const enteredSearchTerm = (e: any) => {\n    addToSearchList && addToSearchList({value:e.target.value});\n    enterSearch(e);\n  }\n\n  const dropdownAction = () => {\n    if(dropdownButtonAction)\n      dropdownButtonAction();    \n  }\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={'id'} size={size}\n                     ref={containerRef}\n                     searchTerm={searchTerm}\n                     disabled={disabled}\n                     validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enteredSearchTerm}\n            focusParentRefs={[containerRef]}\n            onClick={()=>setIsOpen(!isOpen)}\n            ref={dropdownRef}\n          />\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SearchIcon size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n\n      {showDropdown && <DropdownContent id={'search'}\n                                        containerRef={containerRef}\n          size={size}\n          isButton={false}\n          ariaRolesType=\"input\"\n          customizationProps={{\n            items:searchList,\n            action: dropdownAction,\n            actionLabel: dropdownButtonLabel,\n            actionIcon: dropdownButtonIcon,\n            actionVariant: dropdownButtonVariant,\n            onValueUpdate:(e)=>{},\n            scrollable: dropdownScrollable,\n            pinTopItem: true\n          }}\n          isOpen={isOpen}\n          setIsOpen={setIsOpen}\n          filter={''}\n          selectedValues={searchTerm ? [searchTerm] : []}\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\n          messageOnNoResults={''}\n          focused={null}\n          setFocused={()=>{}}\n        />}\n\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"mappings":"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"}

package/dist/InputFields/TextField.cjs

@@ -1,65 +1,47 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _SystemIcons = require("../icons/systemicons/SystemIcons");
-
 var _styles = require("../styles");
-
 var _types = require("../types");
-
 var _styling = require("./styling");
-
 var _common = require("../common");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "withoutBorder", "state", "size", "margin", "note", "className"];
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var id = _ref.id,
-      disabled = _ref.disabled,
-      readOnly = _ref.readOnly,
-      _onChange = _ref.onChange,
-      value = _ref.value,
-      validationMessage = _ref.validationMessage,
-      type = _ref.type,
-      autoComplete = _ref.autoComplete,
-      placeholder = _ref.placeholder,
-      required = _ref.required,
-      pattern = _ref.pattern,
-      maxLength = _ref.maxLength,
-      withoutBorder = _ref.withoutBorder,
-      state = _ref.state,
-      size = _ref.size,
-      _ref$margin = _ref.margin,
-      margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
-      note = _ref.note,
-      className = _ref.className,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
+    _onChange = _ref.onChange,
+    value = _ref.value,
+    validationMessage = _ref.validationMessage,
+    type = _ref.type,
+    autoComplete = _ref.autoComplete,
+    placeholder = _ref.placeholder,
+    required = _ref.required,
+    pattern = _ref.pattern,
+    maxLength = _ref.maxLength,
+    withoutBorder = _ref.withoutBorder,
+    state = _ref.state,
+    size = _ref.size,
+    _ref$margin = _ref.margin,
+    margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
+    note = _ref.note,
+    className = _ref.className,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var elementRef = (0, _common.useFocusVisibleRef)();
   React.useImperativeHandle(ref, function () {
     return elementRef.current;
@@ -88,7 +70,6 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         readOnly: readOnly,
         onChange: function onChange(e) {
           var _e$target;
-
           return _onChange && _onChange((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '');
         },
         activeErrorMessage: !!validationMessage && state !== _types.States.Valid,

package/dist/InputFields/TextField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.cjs","names":["TextField","React","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","rest","elementRef","useFocusVisibleRef","useImperativeHandle","current","cls","States","Invalid","e","preventDefault","undefined","target","Valid","COLORS","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {CheckMark, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {Size, States} from '../types';\nimport {ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\n\ntype TextFieldProps =\n  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id'  | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\n  & {\n  id?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nconst TextField = React.forwardRef(({\n                                      id,\n                                      disabled,\n                                      readOnly,\n                                      onChange,\n                                      value,\n                                      validationMessage,\n                                      type,\n                                      autoComplete,\n                                      placeholder,\n                                      required,\n                                      pattern,\n                                      maxLength,\n                                      withoutBorder,\n                                      state,\n                                      size,\n                                      margin = '4px 0',\n                                      note,\n                                      className,\n                                      ...rest\n                                    }: TextFieldProps, ref) => {\n  const elementRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={cls}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={disabled ? undefined : placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage && state !== States.Valid}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n          {...rest}\n        />\n        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <CheckMark color={COLORS.correct_400}/> :\n              <TechnicalWarning color={COLORS.critical_400}/>}\n            <span>{validationMessage}</span>\n          </ValidationMessage>\n        )}\n        {note && !disabled && (\n          <NoteMessage className={size}>\n            {note.icon}\n            <span>{note.message}</span>\n          </NoteMessage>\n        )}\n      </InputWrapper>\n    </>\n  );\n});\n\nexport default TextField;\n"],"mappings":"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"}
+{"version":3,"file":"TextField.cjs","names":["TextField","React","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","rest","elementRef","useFocusVisibleRef","useImperativeHandle","current","cls","States","Invalid","e","preventDefault","undefined","target","Valid","COLORS","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {CheckMark, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {Size, States} from '../types';\nimport {ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\n\ntype TextFieldProps =\n  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id'  | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\n  & {\n  id?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nconst TextField = React.forwardRef(({\n                                      id,\n                                      disabled,\n                                      readOnly,\n                                      onChange,\n                                      value,\n                                      validationMessage,\n                                      type,\n                                      autoComplete,\n                                      placeholder,\n                                      required,\n                                      pattern,\n                                      maxLength,\n                                      withoutBorder,\n                                      state,\n                                      size,\n                                      margin = '4px 0',\n                                      note,\n                                      className,\n                                      ...rest\n                                    }: TextFieldProps, ref) => {\n  const elementRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={cls}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={disabled ? undefined : placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage && state !== States.Valid}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n          {...rest}\n        />\n        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <CheckMark color={COLORS.correct_400}/> :\n              <TechnicalWarning color={COLORS.critical_400}/>}\n            <span>{validationMessage}</span>\n          </ValidationMessage>\n        )}\n        {note && !disabled && (\n          <NoteMessage className={size}>\n            {note.icon}\n            <span>{note.message}</span>\n          </NoteMessage>\n        )}\n      </InputWrapper>\n    </>\n  );\n});\n\nexport default TextField;\n"],"mappings":"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"}

package/dist/InputFields/TextField.js

@@ -2,11 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _pt from "prop-types";
 var _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "withoutBorder", "state", "size", "margin", "note", "className"];
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import * as React from 'react';
 import { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';
 import { COLORS } from '../styles';
@@ -18,26 +15,25 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var id = _ref.id,
-      disabled = _ref.disabled,
-      readOnly = _ref.readOnly,
-      _onChange = _ref.onChange,
-      value = _ref.value,
-      validationMessage = _ref.validationMessage,
-      type = _ref.type,
-      autoComplete = _ref.autoComplete,
-      placeholder = _ref.placeholder,
-      required = _ref.required,
-      pattern = _ref.pattern,
-      maxLength = _ref.maxLength,
-      withoutBorder = _ref.withoutBorder,
-      state = _ref.state,
-      size = _ref.size,
-      _ref$margin = _ref.margin,
-      margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
-      note = _ref.note,
-      className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    disabled = _ref.disabled,
+    readOnly = _ref.readOnly,
+    _onChange = _ref.onChange,
+    value = _ref.value,
+    validationMessage = _ref.validationMessage,
+    type = _ref.type,
+    autoComplete = _ref.autoComplete,
+    placeholder = _ref.placeholder,
+    required = _ref.required,
+    pattern = _ref.pattern,
+    maxLength = _ref.maxLength,
+    withoutBorder = _ref.withoutBorder,
+    state = _ref.state,
+    size = _ref.size,
+    _ref$margin = _ref.margin,
+    margin = _ref$margin === void 0 ? '4px 0' : _ref$margin,
+    note = _ref.note,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var elementRef = useFocusVisibleRef();
   React.useImperativeHandle(ref, function () {
     return elementRef.current;
@@ -66,7 +62,6 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         readOnly: readOnly,
         onChange: function onChange(e) {
           var _e$target;
-
           return _onChange && _onChange((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '');
         },
         activeErrorMessage: !!validationMessage && state !== States.Valid,

package/dist/InputFields/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":["React","CheckMark","TechnicalWarning","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TextField","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","rest","elementRef","useImperativeHandle","current","cls","Invalid","e","preventDefault","undefined","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {CheckMark, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {Size, States} from '../types';\nimport {ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\n\ntype TextFieldProps =\n  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id'  | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\n  & {\n  id?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nconst TextField = React.forwardRef(({\n                                      id,\n                                      disabled,\n                                      readOnly,\n                                      onChange,\n                                      value,\n                                      validationMessage,\n                                      type,\n                                      autoComplete,\n                                      placeholder,\n                                      required,\n                                      pattern,\n                                      maxLength,\n                                      withoutBorder,\n                                      state,\n                                      size,\n                                      margin = '4px 0',\n                                      note,\n                                      className,\n                                      ...rest\n                                    }: TextFieldProps, ref) => {\n  const elementRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={cls}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={disabled ? undefined : placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage && state !== States.Valid}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n          {...rest}\n        />\n        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <CheckMark color={COLORS.correct_400}/> :\n              <TechnicalWarning color={COLORS.critical_400}/>}\n            <span>{validationMessage}</span>\n          </ValidationMessage>\n        )}\n        {note && !disabled && (\n          <NoteMessage className={size}>\n            {note.icon}\n            <span>{note.message}</span>\n          </NoteMessage>\n        )}\n      </InputWrapper>\n    </>\n  );\n});\n\nexport default TextField;\n"],"mappings":"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"}
+{"version":3,"file":"TextField.js","names":["React","CheckMark","TechnicalWarning","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TextField","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","rest","elementRef","useImperativeHandle","current","cls","Invalid","e","preventDefault","undefined","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {CheckMark, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {Size, States} from '../types';\nimport {ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\n\ntype TextFieldProps =\n  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id'  | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\n  & {\n  id?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nconst TextField = React.forwardRef(({\n                                      id,\n                                      disabled,\n                                      readOnly,\n                                      onChange,\n                                      value,\n                                      validationMessage,\n                                      type,\n                                      autoComplete,\n                                      placeholder,\n                                      required,\n                                      pattern,\n                                      maxLength,\n                                      withoutBorder,\n                                      state,\n                                      size,\n                                      margin = '4px 0',\n                                      note,\n                                      className,\n                                      ...rest\n                                    }: TextFieldProps, ref) => {\n  const elementRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={cls}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={disabled ? undefined : placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage && state !== States.Valid}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n          {...rest}\n        />\n        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <CheckMark color={COLORS.correct_400}/> :\n              <TechnicalWarning color={COLORS.critical_400}/>}\n            <span>{validationMessage}</span>\n          </ValidationMessage>\n        )}\n        {note && !disabled && (\n          <NoteMessage className={size}>\n            {note.icon}\n            <span>{note.message}</span>\n          </NoteMessage>\n        )}\n      </InputWrapper>\n    </>\n  );\n});\n\nexport default TextField;\n"],"mappings":"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"}

package/dist/InputFields/Textarea.cjs

@@ -1,70 +1,49 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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");
-
 var _types = require("../types");
-
 var _SystemIcons = require("../icons/systemicons/SystemIcons");
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _excluded = ["id", "placeholder", "state", "value", "size", "disabled", "validationMessage", "onChange", "margin", "autoHeight", "note", "required", "className"];
-
 var _templateObject, _templateObject2;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 // Add component-specific styles.
 var TextareaWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  ", "\n"])), function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 });
-
 var TextArea = _styledComponents.default.textarea(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid ", ";\n  background: ", ";\n  border-radius: 4px;\n  outline: none;\n  margin: 4px 0px;\n  padding: 16px;\n\n  resize: ", ";\n\n  ", "\n\n  &.small {\n    ", "\n    width: 304px;\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ", ";\n    margin: 3px -1px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ", ";\n    margin: 3px -1px;\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus,\n  &.invalid:active {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.valid {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ", ";\n    margin: 4px 0px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  &::placeholder {\n    ", "\n  }\n"])), _styles.COLORS.neutral_400, _styles.COLORS.white, function (props) {
   return props.autoHeight ? 'none' : '';
 }, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.black), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.black), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.black), _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.critical_500, _styles.COLORS.correct_500, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_500));
-
 var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var id = _ref.id,
-      placeholder = _ref.placeholder,
-      state = _ref.state,
-      value = _ref.value,
-      size = _ref.size,
-      disabled = _ref.disabled,
-      validationMessage = _ref.validationMessage,
-      _onChange = _ref.onChange,
-      margin = _ref.margin,
-      autoHeight = _ref.autoHeight,
-      note = _ref.note,
-      required = _ref.required,
-      className = _ref.className,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    placeholder = _ref.placeholder,
+    state = _ref.state,
+    value = _ref.value,
+    size = _ref.size,
+    disabled = _ref.disabled,
+    validationMessage = _ref.validationMessage,
+    _onChange = _ref.onChange,
+    margin = _ref.margin,
+    autoHeight = _ref.autoHeight,
+    note = _ref.note,
+    required = _ref.required,
+    className = _ref.className,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var cls = "".concat(size, " ").concat(state || (validationMessage ? _types.States.Invalid : ''), " ").concat(className || '');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TextareaWrapper, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TextArea, _objectSpread({
@@ -77,7 +56,6 @@ var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       disabled: disabled,
       onChange: function onChange(e) {
         var _e$target;
-
         return _onChange && _onChange((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '');
       },
       required: required

package/dist/InputFields/Textarea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.cjs","names":["TextareaWrapper","styled","div","props","margin","TextArea","textarea","COLORS","neutral_400","white","autoHeight","ComponentMStyling","ComponentTextStyle","Italic","black","ComponentSStyling","neutral_500","primary_700","primary_800","critical_500","correct_500","neutral_100","neutral_300","Textarea","React","forwardRef","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","className","rest","cls","States","Invalid","undefined","e","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/Textarea.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentSStyling } from '../styles';\nimport { ErrorMessage, NoteMessage, ValidationMessage } from './styling';\nimport { Size, States } from '../types';\n\n/**\n * Import custom components.\n */\nimport { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\nimport { TextareaProps, TextFieldNote } from './types';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea<{ autoHeight?: boolean }>`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 4px 0px;\n  padding: 16px;\n\n  resize: ${(props) => (props.autoHeight ? 'none' : '')};\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 304px;\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 3px -1px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\n    margin: 3px -1px;\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus,\n  &.invalid:active {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  &.valid {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 4px 0px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n`;\n\nconst Textarea = React.forwardRef<any, TextareaProps>(({\n  id,\n  placeholder,\n  state,\n  value,\n  size,\n  disabled,\n  validationMessage,\n  onChange,\n  margin,\n  autoHeight,\n  note,\n  required,\n  className,\n  ...rest\n}: TextareaProps, ref) => {\n\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        ref={ref}\n        value={value}\n        placeholder={disabled ? undefined : placeholder}\n        autoHeight={autoHeight}\n        className={cls}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n        required={required}\n        {...rest}\n      />\n      {validationMessage && (\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n          {state === States.Valid ? <CheckMark color={COLORS.correct_400} /> : <TechnicalWarning color={COLORS.critical_400} />}\n          <span>{validationMessage}</span>\n        </ValidationMessage>\n      )}\n      {note && !disabled && (\n        <NoteMessage className={size}>\n          {note.icon}\n          <span>{note.message}</span>\n        </NoteMessage>\n      )}\n    </TextareaWrapper>\n  );\n});\n\nexport default Textarea;\n"],"mappings":"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"}
+{"version":3,"file":"Textarea.cjs","names":["TextareaWrapper","styled","div","props","margin","TextArea","textarea","COLORS","neutral_400","white","autoHeight","ComponentMStyling","ComponentTextStyle","Italic","black","ComponentSStyling","neutral_500","primary_700","primary_800","critical_500","correct_500","neutral_100","neutral_300","Textarea","React","forwardRef","ref","id","placeholder","state","value","size","disabled","validationMessage","onChange","note","required","className","rest","cls","States","Invalid","undefined","e","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/Textarea.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentSStyling } from '../styles';\nimport { ErrorMessage, NoteMessage, ValidationMessage } from './styling';\nimport { Size, States } from '../types';\n\n/**\n * Import custom components.\n */\nimport { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentMStyling, ComponentTextStyle } from '../styles';\nimport { TextareaProps, TextFieldNote } from './types';\n\n// Add component-specific styles.\nconst TextareaWrapper = styled.div<{ margin?: string }>`\n  width: 100%;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\nconst TextArea = styled.textarea<{ autoHeight?: boolean }>`\n  border: 1px solid ${COLORS.neutral_400};\n  background: ${COLORS.white};\n  border-radius: 4px;\n  outline: none;\n  margin: 4px 0px;\n  padding: 16px;\n\n  resize: ${(props) => (props.autoHeight ? 'none' : '')};\n\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 304px;\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.black)}\n    width: 344px;\n  }\n\n  &:hover {\n    border: 2px solid ${COLORS.primary_700};\n    margin: 3px -1px;\n  }\n\n  &:active,\n  &:focus {\n    border: 2px solid ${COLORS.primary_800};\n    margin: 3px -1px;\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus,\n  &.invalid:active {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  &.valid {\n    border: none;\n    margin: 4px 0px;\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n  }\n\n  &:disabled,\n  &:disabled:hover,\n  &:disabled:focus {\n    cursor: not-allowed;\n    border: 1px solid ${COLORS.neutral_100};\n    margin: 4px 0px;\n    box-shadow: none;\n\n    &::placeholder {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n`;\n\nconst Textarea = React.forwardRef<any, TextareaProps>(({\n  id,\n  placeholder,\n  state,\n  value,\n  size,\n  disabled,\n  validationMessage,\n  onChange,\n  margin,\n  autoHeight,\n  note,\n  required,\n  className,\n  ...rest\n}: TextareaProps, ref) => {\n\n  const cls = `${size} ${state || (validationMessage ? States.Invalid : '')} ${className || ''}`;\n  return (\n    <TextareaWrapper>\n      <TextArea\n        id={id}\n        ref={ref}\n        value={value}\n        placeholder={disabled ? undefined : placeholder}\n        autoHeight={autoHeight}\n        className={cls}\n        disabled={disabled}\n        onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n        required={required}\n        {...rest}\n      />\n      {validationMessage && (\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n          {state === States.Valid ? <CheckMark color={COLORS.correct_400} /> : <TechnicalWarning color={COLORS.critical_400} />}\n          <span>{validationMessage}</span>\n        </ValidationMessage>\n      )}\n      {note && !disabled && (\n        <NoteMessage className={size}>\n          {note.icon}\n          <span>{note.message}</span>\n        </NoteMessage>\n      )}\n    </TextareaWrapper>\n  );\n});\n\nexport default Textarea;\n"],"mappings":"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"}

package/dist/InputFields/Textarea.js

@@ -2,33 +2,29 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _excluded = ["id", "placeholder", "state", "value", "size", "disabled", "validationMessage", "onChange", "margin", "autoHeight", "note", "required", "className"];
-
 var _templateObject, _templateObject2;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 /**
  * Import React libraries.
  */
 import * as React from 'react';
+
 /**
  * Import custom styles.
  */
-
 import { COLORS, ComponentSStyling } from '../styles';
 import { NoteMessage, ValidationMessage } from './styling';
 import { States } from '../types';
+
 /**
  * Import custom components.
  */
-
 import { CheckMark, TechnicalWarning } from '../icons/systemicons/SystemIcons';
+
 /**
  * Import third-party libraries.
  */
-
 import styled from 'styled-components';
 import { ComponentMStyling, ComponentTextStyle } from '../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -42,20 +38,19 @@ var TextArea = styled.textarea(_templateObject2 || (_templateObject2 = _taggedTe
 }, ComponentMStyling(ComponentTextStyle.Italic, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentMStyling(ComponentTextStyle.Italic, COLORS.black), COLORS.primary_700, COLORS.primary_800, COLORS.critical_500, COLORS.correct_500, COLORS.neutral_100, COLORS.neutral_300, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500));
 var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var id = _ref.id,
-      placeholder = _ref.placeholder,
-      state = _ref.state,
-      value = _ref.value,
-      size = _ref.size,
-      disabled = _ref.disabled,
-      validationMessage = _ref.validationMessage,
-      _onChange = _ref.onChange,
-      margin = _ref.margin,
-      autoHeight = _ref.autoHeight,
-      note = _ref.note,
-      required = _ref.required,
-      className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    placeholder = _ref.placeholder,
+    state = _ref.state,
+    value = _ref.value,
+    size = _ref.size,
+    disabled = _ref.disabled,
+    validationMessage = _ref.validationMessage,
+    _onChange = _ref.onChange,
+    margin = _ref.margin,
+    autoHeight = _ref.autoHeight,
+    note = _ref.note,
+    required = _ref.required,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var cls = "".concat(size, " ").concat(state || (validationMessage ? States.Invalid : ''), " ").concat(className || '');
   return /*#__PURE__*/_jsxs(TextareaWrapper, {
     children: [/*#__PURE__*/_jsx(TextArea, _objectSpread({
@@ -68,7 +63,6 @@ var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       disabled: disabled,
       onChange: function onChange(e) {
         var _e$target;
-
         return _onChange && _onChange((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) || '');
       },
       required: required

package/dist/InputFields/Textarea.js.map

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