@laerdal/life-react-components 1.4.1-dev.1 → 1.4.1-dev.12

package/dist/InputFields/components/SearchBarInput.js

@@ -0,0 +1,73 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2;
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';
+import { ComponentMStyling, ComponentSStyling } from '../../styles';
+import { useFocusVisibleRef } from '../../common/FocusVisible';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Search = styled.input.attrs(function () {
+  return {
+    type: 'search'
+  };
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  appearance: none;\n  width: calc(100% - 96px);\n\n  ", "\n    /* To prevent browser putting its own cross inside the search bar */\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ", "\n  }\n\n  &:focus {\n    outline-width: 0;\n  }\n"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500));
+export var BigSearch = styled(Search)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 32px;\n  border-width: 0;\n  margin-left: 50px;\n  outline: none;\n\n  ", "\n  ::placeholder {\n    ", "\n  }\n\n  ", " {\n    ::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ::placeholder {\n      ", "\n    }\n  }\n\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600));
+var SearchBarInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var id = props.id,
+      searchTerm = props.searchTerm,
+      setSearchTerm = props.setSearchTerm,
+      enterSearch = props.enterSearch,
+      placeholder = props.placeholder,
+      disabled = props.disabled,
+      onKeyDown = props.onKeyDown,
+      size = props.size,
+      _onBlur = props.onBlur;
+  var elementRef = useFocusVisibleRef(props.focusParentRefs || [], ref);
+
+  var isPressingEnter = function isPressingEnter(e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.stopPropagation();
+      return true;
+    }
+
+    return false;
+  };
+
+  return /*#__PURE__*/_jsx(BigSearch, {
+    placeholder: disabled ? '' : placeholder,
+    ref: elementRef,
+    id: id,
+    "data-testid": id,
+    className: size ? size : '',
+    tabIndex: 0,
+    disabled: disabled,
+    onChange: function onChange(e) {
+      return setSearchTerm(e.target.value);
+    },
+    value: searchTerm,
+    onBlur: function onBlur(e) {
+      return _onBlur && _onBlur(e);
+    },
+    onKeyDown: onKeyDown,
+    onKeyPress: function onKeyPress(e) {
+      return isPressingEnter(e) ? enterSearch(e) : null;
+    }
+  });
+});
+SearchBarInput.propTypes = {
+  id: _pt.string.isRequired,
+  searchTerm: _pt.string,
+  setSearchTerm: _pt.func.isRequired,
+  enterSearch: _pt.func.isRequired,
+  placeholder: _pt.string,
+  disabled: _pt.bool,
+  onKeyDown: _pt.func,
+  onBlur: _pt.func,
+  focusParentRefs: _pt.array
+};
+export default SearchBarInput;
+//# sourceMappingURL=SearchBarInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","useFocusVisibleRef","Search","input","attrs","type","Regular","black","Italic","neutral_500","BigSearch","neutral_600","MEDIUM","SearchBarInput","forwardRef","props","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","elementRef","focusParentRefs","isPressingEnter","e","key","preventDefault","stopPropagation","target","value"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles/index';\nimport {Size} from '../../types';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles';\nimport {useFocusVisibleRef} from '../../common/FocusVisible';\n\nexport const Search = styled.input.attrs(() => ({type: 'search'}))`\n  appearance: none;\n  width: calc(100% - 96px);\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    /* To prevent browser putting its own cross inside the search bar */\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  &:focus {\n    outline-width: 0;\n  }\n`;\n\nexport const BigSearch = styled(Search)`\n  height: 32px;\n  border-width: 0;\n  margin-left: 50px;\n  outline: none;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    ::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n`;\n\ntype SearchBarInputProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  onBlur?: (e: any) => void;\n  focusParentRefs?: React.RefObject<any>[];\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const {\n    id,\n    searchTerm,\n    setSearchTerm,\n    enterSearch,\n    placeholder,\n    disabled,\n    onKeyDown,\n    size,\n    onBlur\n  } = props;\n\n  const elementRef = useFocusVisibleRef(props.focusParentRefs || [], ref);\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  return (\n    <BigSearch\n      placeholder={disabled ? '' : placeholder}\n      ref={elementRef}\n      id={id}\n      data-testid={id}\n      className={size ? size : ''}\n      tabIndex={0}\n      disabled={disabled}\n      onChange={(e: any) => setSearchTerm(e.target.value)}\n      value={searchTerm}\n      onBlur={(e) => onBlur && onBlur(e)}\n      onKeyDown={onKeyDown}\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"file":"SearchBarInput.js"}

package/dist/InputFields/components/SearchField.cjs

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyledSearchField = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _index = require("../../styles/index");
+
+var _styling = require("../styling");
+
+var _styles = require("../../styles");
+
+var _zIndexes = require("../../styles/z-indexes");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+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; }
+
+var DisabledState = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid ", ";\n  pointer-events: none;\n  background-color: transparent !important;\n  box-shadow: none !important;\n"])), _index.COLORS.neutral_100);
+
+var StyledSearchField = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ", ";\n\n  ", "\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ", "\n  }\n\n  ", " {\n    ", "\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    height: 56px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    border-color: transparent;\n  }\n\n  &.focus-visible-within{\n    outline: none;\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    z-index: ", ";\n  }\n  \n  &:focus-within {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    border-color: transparent;\n  }\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n\n  div {\n    color: ", ";\n    background-color: transparent;\n  }\n\n  ", "\n  ", "\n"])), _index.COLORS.neutral_400, _index.COLORS.white, (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500), _index.BREAKPOINTS.MEDIUM, (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500), (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _styles.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500), (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _styles.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500), _index.COLORS.primary_700, _zIndexes.Z_INDEXES.focus, _index.COLORS.primary_800, _index.COLORS.neutral_100, _index.COLORS.neutral_600, function (props) {
+  return props.disabled ? DisabledState : '';
+}, function (props) {
+  return props.activeValidationMessage ? _styling.activeValidationMessageState : '';
+});
+
+exports.StyledSearchField = StyledSearchField;
+var SearchField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var id = _ref.id,
+      searchTerm = _ref.searchTerm,
+      disabled = _ref.disabled,
+      validationMessage = _ref.validationMessage,
+      children = _ref.children,
+      size = _ref.size;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSearchField, {
+    id: "".concat(id, "_main"),
+    ref: ref,
+    className: (searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : ''),
+    disabled: disabled,
+    activeValidationMessage: validationMessage !== undefined && validationMessage !== '',
+    children: children
+  });
+});
+SearchField.propTypes = {
+  id: _propTypes.default.string.isRequired,
+  searchTerm: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  validationMessage: _propTypes.default.string,
+  children: _propTypes.default.any.isRequired,
+  size: _propTypes.default.string.isRequired
+};
+var _default = SearchField;
+exports.default = _default;
+//# sourceMappingURL=SearchField.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/InputFields/components/SearchField.tsx"],"names":["DisabledState","css","COLORS","neutral_100","StyledSearchField","styled","div","neutral_400","white","ComponentTextStyle","Regular","black","Italic","neutral_500","BREAKPOINTS","MEDIUM","primary_700","Z_INDEXES","focus","primary_800","neutral_600","props","disabled","activeValidationMessage","activeValidationMessageState","SearchField","React","forwardRef","ref","id","searchTerm","validationMessage","children","size","concat","undefined"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,aAAa,OAAGC,qBAAH,wNACGC,cAAOC,WADV,CAAnB;;AAOO,IAAMC,iBAAiB,GAAGC,0BAAOC,GAAV,kzCAGQJ,cAAOK,WAHf,EAURL,cAAOM,KAVC,EAY1B,+BAAkBC,0BAAmBC,OAArC,EAA8CR,cAAOS,KAArD,CAZ0B,EAkBxB,+BAAkBF,0BAAmBG,MAArC,EAA6CV,cAAOW,WAApD,CAlBwB,EAqB1BC,mBAAYC,MArBc,EAsBxB,+BAAkBN,0BAAmBC,OAArC,EAA8CR,cAAOS,KAArD,CAtBwB,EA4BtB,+BAAkBF,0BAAmBG,MAArC,EAA6CV,cAAOW,WAApD,CA5BsB,EAiCxB,+BAAkBJ,0BAAmBC,OAArC,EAA8CR,cAAOS,KAArD,CAjCwB,EAsCtB,+BAAkBF,0BAAmBG,MAArC,EAA6CV,cAAOW,WAApD,CAtCsB,EA2CxB,+BAAkBJ,0BAAmBC,OAArC,EAA8CR,cAAOS,KAArD,CA3CwB,EA+CtB,+BAAkBF,0BAAmBG,MAArC,EAA6CV,cAAOW,WAApD,CA/CsB,EAoDUX,cAAOc,WApDjB,EA2DfC,oBAAUC,KA3DK,EA+DUhB,cAAOiB,WA/DjB,EAoENjB,cAAOC,WApED,EA0EjBD,cAAOkB,WA1EU,EA8E1B,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,QAAN,GAAiBtB,aAAjB,GAAiC,EAA7C;AAAA,CA9E0B,EA+E1B,UAACqB,KAAD;AAAA,SAAYA,KAAK,CAACE,uBAAN,GAAgCC,qCAAhC,GAA+D,EAA3E;AAAA,CA/E0B,CAAvB;;;AA2FP,IAAMC,WAAW,gBAAGC,KAAK,CAACC,UAAN,CAAkD,gBAOMC,GAPN,EAOc;AAAA,MANTC,EAMS,QANTA,EAMS;AAAA,MALTC,UAKS,QALTA,UAKS;AAAA,MAJTR,QAIS,QAJTA,QAIS;AAAA,MAHTS,iBAGS,QAHTA,iBAGS;AAAA,MAFTC,QAES,QAFTA,QAES;AAAA,MADTC,IACS,QADTA,IACS;AAClF,sBACE,qBAAC,iBAAD;AACE,IAAA,EAAE,YAAKJ,EAAL,UADJ;AAEE,IAAA,GAAG,EAAED,GAFP;AAGE,IAAA,SAAS,EAAE,CAACE,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EAAvC,EAA2CI,MAA3C,CAAkDD,IAAI,GAAGA,IAAH,GAAU,EAAhE,CAHb;AAIE,IAAA,QAAQ,EAAEX,QAJZ;AAKE,IAAA,uBAAuB,EAAES,iBAAiB,KAAKI,SAAtB,IAAmCJ,iBAAiB,KAAK,EALpF;AAAA,cAMGC;AANH,IADF;AAUD,CAlBmB,CAApB;;AAREH,EAAAA,E;AACAC,EAAAA,U;AACAR,EAAAA,Q;AACAS,EAAAA,iB;AACAC,EAAAA,Q;AACAC,EAAAA,I;;eAuBaR,W","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles/index';\nimport {activeValidationMessageState} from '../styling';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles';\nimport {Z_INDEXES} from '../../styles/z-indexes';\n\nconst DisabledState = css`\n  border: 1px solid ${COLORS.neutral_100};\n  pointer-events: none;\n  background-color: transparent !important;\n  box-shadow: none !important;\n`;\n\nexport const StyledSearchField = styled.div<{ disabled?: boolean; activeValidationMessage?: boolean; }>`\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ${COLORS.white};\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    border-color: transparent;\n  }\n\n  &.focus-visible-within{\n    outline: none;\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    z-index: ${Z_INDEXES.focus};\n  }\n  \n  &:focus-within {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    border-color: transparent;\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n\n  div {\n    color: ${COLORS.neutral_600};\n    background-color: transparent;\n  }\n\n  ${(props) => (props.disabled ? DisabledState : '')}\n  ${(props) => (props.activeValidationMessage ? activeValidationMessageState : '')}\n`;\n\ntype SeachFieldProps = {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  size: string;\n};\n\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({\n                                                                           id,\n                                                                           searchTerm,\n                                                                           disabled,\n                                                                           validationMessage,\n                                                                           children,\n                                                                           size\n                                                                         }, ref) => {\n  return (\n    <StyledSearchField\n      id={`${id}_main`}\n      ref={ref}\n      className={(searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '')}\n      disabled={disabled}\n      activeValidationMessage={validationMessage !== undefined && validationMessage !== ''}>\n      {children}\n    </StyledSearchField>\n  );\n});\n\nexport default SearchField;\n"],"file":"SearchField.cjs"}

package/dist/InputFields/components/SearchField.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export declare const StyledSearchField: import("styled-components").StyledComponent<"div", any, {
+    disabled?: boolean | undefined;
+    activeValidationMessage?: boolean | undefined;
+}, never>;
+declare type SeachFieldProps = {
+    id: string;
+    searchTerm?: string;
+    disabled?: boolean;
+    validationMessage?: string;
+    children: any;
+    size: string;
+};
+declare const SearchField: React.ForwardRefExoticComponent<SeachFieldProps & React.RefAttributes<HTMLDivElement>>;
+export default SearchField;

package/dist/InputFields/components/SearchField.js

@@ -0,0 +1,44 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2;
+
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';
+import { activeValidationMessageState } from '../styling';
+import { ComponentMStyling, ComponentSStyling } from '../../styles';
+import { Z_INDEXES } from '../../styles/z-indexes';
+import { jsx as _jsx } from "react/jsx-runtime";
+var DisabledState = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  pointer-events: none;\n  background-color: transparent !important;\n  box-shadow: none !important;\n"])), COLORS.neutral_100);
+export var StyledSearchField = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ", ";\n\n  ", "\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ", "\n  }\n\n  ", " {\n    ", "\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    height: 56px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    border-color: transparent;\n  }\n\n  &.focus-visible-within{\n    outline: none;\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    z-index: ", ";\n  }\n  \n  &:focus-within {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    border-color: transparent;\n  }\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n\n  div {\n    color: ", ";\n    background-color: transparent;\n  }\n\n  ", "\n  ", "\n"])), COLORS.neutral_400, COLORS.white, ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), COLORS.primary_700, Z_INDEXES.focus, COLORS.primary_800, COLORS.neutral_100, COLORS.neutral_600, function (props) {
+  return props.disabled ? DisabledState : '';
+}, function (props) {
+  return props.activeValidationMessage ? activeValidationMessageState : '';
+});
+var SearchField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var id = _ref.id,
+      searchTerm = _ref.searchTerm,
+      disabled = _ref.disabled,
+      validationMessage = _ref.validationMessage,
+      children = _ref.children,
+      size = _ref.size;
+  return /*#__PURE__*/_jsx(StyledSearchField, {
+    id: "".concat(id, "_main"),
+    ref: ref,
+    className: (searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : ''),
+    disabled: disabled,
+    activeValidationMessage: validationMessage !== undefined && validationMessage !== '',
+    children: children
+  });
+});
+SearchField.propTypes = {
+  id: _pt.string.isRequired,
+  searchTerm: _pt.string,
+  disabled: _pt.bool,
+  validationMessage: _pt.string,
+  children: _pt.any.isRequired,
+  size: _pt.string.isRequired
+};
+export default SearchField;
+//# sourceMappingURL=SearchField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/InputFields/components/SearchField.tsx"],"names":["React","styled","css","BREAKPOINTS","COLORS","ComponentTextStyle","activeValidationMessageState","ComponentMStyling","ComponentSStyling","Z_INDEXES","DisabledState","neutral_100","StyledSearchField","div","neutral_400","white","Regular","black","Italic","neutral_500","MEDIUM","primary_700","focus","primary_800","neutral_600","props","disabled","activeValidationMessage","SearchField","forwardRef","ref","id","searchTerm","validationMessage","children","size","concat","undefined"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,IAAgBC,GAAhB,QAA0B,mBAA1B;AACA,SAAQC,WAAR,EAAqBC,MAArB,EAA6BC,kBAA7B,QAAsD,oBAAtD;AACA,SAAQC,4BAAR,QAA2C,YAA3C;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,QAAmD,cAAnD;AACA,SAAQC,SAAR,QAAwB,wBAAxB;;AAEA,IAAMC,aAAa,GAAGR,GAAH,yMACGE,MAAM,CAACO,WADV,CAAnB;AAOA,OAAO,IAAMC,iBAAiB,GAAGX,MAAM,CAACY,GAAV,oyCAGQT,MAAM,CAACU,WAHf,EAURV,MAAM,CAACW,KAVC,EAY1BP,iBAAiB,CAACH,kBAAkB,CAACW,OAApB,EAA6BZ,MAAM,CAACa,KAApC,CAZS,EAkBxBT,iBAAiB,CAACH,kBAAkB,CAACa,MAApB,EAA4Bd,MAAM,CAACe,WAAnC,CAlBO,EAqB1BhB,WAAW,CAACiB,MArBc,EAsBxBb,iBAAiB,CAACF,kBAAkB,CAACW,OAApB,EAA6BZ,MAAM,CAACa,KAApC,CAtBO,EA4BtBV,iBAAiB,CAACF,kBAAkB,CAACa,MAApB,EAA4Bd,MAAM,CAACe,WAAnC,CA5BK,EAiCxBX,iBAAiB,CAACH,kBAAkB,CAACW,OAApB,EAA6BZ,MAAM,CAACa,KAApC,CAjCO,EAsCtBT,iBAAiB,CAACH,kBAAkB,CAACa,MAApB,EAA4Bd,MAAM,CAACe,WAAnC,CAtCK,EA2CxBZ,iBAAiB,CAACF,kBAAkB,CAACW,OAApB,EAA6BZ,MAAM,CAACa,KAApC,CA3CO,EA+CtBV,iBAAiB,CAACF,kBAAkB,CAACa,MAApB,EAA4Bd,MAAM,CAACe,WAAnC,CA/CK,EAoDUf,MAAM,CAACiB,WApDjB,EA2DfZ,SAAS,CAACa,KA3DK,EA+DUlB,MAAM,CAACmB,WA/DjB,EAoENnB,MAAM,CAACO,WApED,EA0EjBP,MAAM,CAACoB,WA1EU,EA8E1B,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,QAAN,GAAiBhB,aAAjB,GAAiC,EAA7C;AAAA,CA9E0B,EA+E1B,UAACe,KAAD;AAAA,SAAYA,KAAK,CAACE,uBAAN,GAAgCrB,4BAAhC,GAA+D,EAA3E;AAAA,CA/E0B,CAAvB;AA2FP,IAAMsB,WAAW,gBAAG5B,KAAK,CAAC6B,UAAN,CAAkD,gBAOMC,GAPN,EAOc;AAAA,MANTC,EAMS,QANTA,EAMS;AAAA,MALTC,UAKS,QALTA,UAKS;AAAA,MAJTN,QAIS,QAJTA,QAIS;AAAA,MAHTO,iBAGS,QAHTA,iBAGS;AAAA,MAFTC,QAES,QAFTA,QAES;AAAA,MADTC,IACS,QADTA,IACS;AAClF,sBACE,KAAC,iBAAD;AACE,IAAA,EAAE,YAAKJ,EAAL,UADJ;AAEE,IAAA,GAAG,EAAED,GAFP;AAGE,IAAA,SAAS,EAAE,CAACE,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EAAvC,EAA2CI,MAA3C,CAAkDD,IAAI,GAAGA,IAAH,GAAU,EAAhE,CAHb;AAIE,IAAA,QAAQ,EAAET,QAJZ;AAKE,IAAA,uBAAuB,EAAEO,iBAAiB,KAAKI,SAAtB,IAAmCJ,iBAAiB,KAAK,EALpF;AAAA,cAMGC;AANH,IADF;AAUD,CAlBmB,CAApB;;AAREH,EAAAA,E;AACAC,EAAAA,U;AACAN,EAAAA,Q;AACAO,EAAAA,iB;AACAC,EAAAA,Q;AACAC,EAAAA,I;;AAuBF,eAAeP,WAAf","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles/index';\nimport {activeValidationMessageState} from '../styling';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles';\nimport {Z_INDEXES} from '../../styles/z-indexes';\n\nconst DisabledState = css`\n  border: 1px solid ${COLORS.neutral_100};\n  pointer-events: none;\n  background-color: transparent !important;\n  box-shadow: none !important;\n`;\n\nexport const StyledSearchField = styled.div<{ disabled?: boolean; activeValidationMessage?: boolean; }>`\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ${COLORS.white};\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    border-color: transparent;\n  }\n\n  &.focus-visible-within{\n    outline: none;\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    z-index: ${Z_INDEXES.focus};\n  }\n  \n  &:focus-within {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    border-color: transparent;\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n\n  div {\n    color: ${COLORS.neutral_600};\n    background-color: transparent;\n  }\n\n  ${(props) => (props.disabled ? DisabledState : '')}\n  ${(props) => (props.activeValidationMessage ? activeValidationMessageState : '')}\n`;\n\ntype SeachFieldProps = {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  size: string;\n};\n\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({\n                                                                           id,\n                                                                           searchTerm,\n                                                                           disabled,\n                                                                           validationMessage,\n                                                                           children,\n                                                                           size\n                                                                         }, ref) => {\n  return (\n    <StyledSearchField\n      id={`${id}_main`}\n      ref={ref}\n      className={(searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '')}\n      disabled={disabled}\n      activeValidationMessage={validationMessage !== undefined && validationMessage !== ''}>\n      {children}\n    </StyledSearchField>\n  );\n});\n\nexport default SearchField;\n"],"file":"SearchField.js"}

package/dist/InputFields/index.cjs

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function get() {
+    return _Checkbox.default;
+  }
+});
+Object.defineProperty(exports, "DatepickerField", {
+  enumerable: true,
+  get: function get() {
+    return _DatepickerField.default;
+  }
+});
+Object.defineProperty(exports, "InputLabel", {
+  enumerable: true,
+  get: function get() {
+    return _Label.default;
+  }
+});
+Object.defineProperty(exports, "PasswordField", {
+  enumerable: true,
+  get: function get() {
+    return _PasswordField.default;
+  }
+});
+Object.defineProperty(exports, "QuickSearch", {
+  enumerable: true,
+  get: function get() {
+    return _QuickSearch.default;
+  }
+});
+Object.defineProperty(exports, "RadioButton", {
+  enumerable: true,
+  get: function get() {
+    return _RadioButton.default;
+  }
+});
+Object.defineProperty(exports, "SearchBar", {
+  enumerable: true,
+  get: function get() {
+    return _SearchBar.default;
+  }
+});
+Object.defineProperty(exports, "TextField", {
+  enumerable: true,
+  get: function get() {
+    return _TextField.default;
+  }
+});
+Object.defineProperty(exports, "Textarea", {
+  enumerable: true,
+  get: function get() {
+    return _Textarea.default;
+  }
+});
+
+var _TextField = _interopRequireDefault(require("./TextField"));
+
+var _PasswordField = _interopRequireDefault(require("./PasswordField"));
+
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+
+var _RadioButton = _interopRequireDefault(require("./RadioButton"));
+
+var _SearchBar = _interopRequireDefault(require("./SearchBar"));
+
+var _Label = _interopRequireDefault(require("./Label"));
+
+var _DatepickerField = _interopRequireDefault(require("./DatepickerField"));
+
+var _Textarea = _interopRequireDefault(require("./Textarea"));
+
+var _QuickSearch = _interopRequireDefault(require("./QuickSearch"));
+//# sourceMappingURL=index.cjs.map

package/dist/InputFields/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/InputFields/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\n\nexport { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch };\n"],"file":"index.cjs"}

package/dist/InputFields/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/InputFields/index.ts"],"names":["TextField","PasswordField","Checkbox","RadioButton","SearchBar","InputLabel","DatepickerField","Textarea","QuickSearch"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,aAAtB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,UAAP,MAAuB,SAAvB;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AAEA,SAASR,SAAT,EAAoBC,aAApB,EAAmCC,QAAnC,EAA6CC,WAA7C,EAA0DC,SAA1D,EAAqEC,UAArE,EAAiFC,eAAjF,EAAkGC,QAAlG,EAA4GC,WAA5G","sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\n\nexport { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch };\n"],"file":"index.js"}

package/dist/InputFields/styling.cjs

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.activeValidationMessageState = exports.WarningMessage = exports.Warning = exports.ValidationStyling = exports.StyledIcon = exports.SearchIconWrapper = exports.RequiredStar = exports.InputWrapper = exports.InputFieldStyling = exports.ErrorMessage = exports.AutofilledMessage = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _styles = require("../styles");
+
+var _typography = require("../styles/typography");
+
+var _zIndexes = require("../styles/z-indexes");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+
+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; }
+
+var InputWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  ", ";\n  ", "\n"])), function (props) {
+  return props.locked || props.disabled ? 'cursor: not-allowed;' : '';
+}, function (props) {
+  return props.margin ? "margin: ".concat(props.margin, ";") : '';
+});
+
+exports.InputWrapper = InputWrapper;
+var lockedState = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", " !important;\n  color: ", " !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_600);
+var activeValidationMessageState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n  -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), _styles.COLORS.warning_400, _styles.COLORS.warning_400, _styles.COLORS.warning_400);
+exports.activeValidationMessageState = activeValidationMessageState;
+var activeErrorMessageState = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n  -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), _styles.COLORS.critical_400, _styles.COLORS.critical_400, _styles.COLORS.critical_400);
+var activeCorrectInput = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n  -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), _styles.COLORS.correct_500, _styles.COLORS.correct_500, _styles.COLORS.correct_500);
+
+var InputFieldStyling = _styledComponents.default.input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ", "\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  outline: none;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ", " !important;\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ", " !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n  \n  &.focus-visible{\n    outline: none;\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    z-index: ", ";\n  }\n\n  &.error {\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 2px;\n    border-color: #e97116;\n    padding: 0 15px !important;\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.error {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.active {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n  \n"])), function (props) {
+  return props.withoutBorder ? "-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      " : "-webkit-box-shadow: inset 0px 0px 0px 1px ".concat(_styles.COLORS.neutral_400, ";\n      -moz-box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.neutral_400, ";\n      box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.neutral_400, ";");
+}, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), _styles.COLORS.black, function (props) {
+  return props.locked ? lockedState : '';
+}, function (props) {
+  return props.activeValidationMessage ? activeValidationMessageState : '';
+}, function (props) {
+  return props.activeErrorMessage ? activeErrorMessageState : '';
+}, function (props) {
+  return props.correctInput ? activeCorrectInput : '';
+}, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.primary_800, _zIndexes.Z_INDEXES.focus, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.primary_800);
+
+exports.InputFieldStyling = InputFieldStyling;
+var ValidationStyling = (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  &.error-msg {\n    ", "\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ", "\n    font-weight: 700;\n    line-height: 15px;\n  }\n"])), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, '#e76468'));
+exports.ValidationStyling = ValidationStyling;
+
+var RequiredStar = _styledComponents.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 28px;\n  line-height: 12px;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n"])), _styles.COLORS.critical_500);
+
+exports.RequiredStar = RequiredStar;
+
+var Warning = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 12px;\n  line-height: 140%;\n\n  ", " {\n    font-size: 14px;\n  }\n\n  &.small {\n    font-size: 12px;\n  }\n  &.medium {\n    font-size: 14px;\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
+
+exports.Warning = Warning;
+var WarningMessage = (0, _styledComponents.default)(Warning)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.warning_500);
+exports.WarningMessage = WarningMessage;
+var ErrorMessage = (0, _styledComponents.default)(Warning)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.critical_500);
+exports.ErrorMessage = ErrorMessage;
+var AutofilledMessage = (0, _styledComponents.default)(Warning)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.neutral_600);
+exports.AutofilledMessage = AutofilledMessage;
+
+var StyledIcon = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 50%;\n"])));
+
+exports.StyledIcon = StyledIcon;
+var SearchIconWrapper = (0, _styledComponents.default)(StyledIcon)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  border-radius: 50%;\n"])));
+exports.SearchIconWrapper = SearchIconWrapper;
+//# sourceMappingURL=styling.cjs.map

package/dist/InputFields/styling.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/InputFields/styling.ts"],"names":["InputWrapper","styled","div","props","locked","disabled","margin","lockedState","css","COLORS","neutral_100","neutral_300","neutral_600","activeValidationMessageState","warning_400","activeErrorMessageState","critical_400","activeCorrectInput","correct_500","InputFieldStyling","input","withoutBorder","neutral_400","ComponentTextStyle","Italic","BREAKPOINTS","MEDIUM","black","activeValidationMessage","activeErrorMessage","correctInput","primary_800","Z_INDEXES","focus","primary_700","ValidationStyling","Regular","RequiredStar","span","critical_500","Warning","WarningMessage","warning_500","ErrorMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const InputWrapper = styled.div<{ locked?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeValidationMessageState = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\nconst activeErrorMessageState = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\nconst activeCorrectInput = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n`;\n\nconst InputFieldStyling = styled.input<{\n  locked?: boolean;\n  activeValidationMessage?: boolean;\n  activeErrorMessage?: boolean;\n  correctInput?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  outline: none;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.locked ? lockedState : '')}\n  ${(props) => (props.activeValidationMessage ? activeValidationMessageState : '')}\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n  ${(props) => (props.correctInput ? activeCorrectInput : '')}\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n  \n  &.focus-visible{\n    outline: none;\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    z-index: ${Z_INDEXES.focus};\n  }\n\n  &.error {\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 2px;\n    border-color: #e97116;\n    padding: 0 15px !important;\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.error {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n  \n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const RequiredStar = styled.span`\n  color: ${COLORS.critical_500};\n  font-size: 28px;\n  line-height: 12px;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n`;\nexport const Warning = styled.div`\n  font-size: 12px;\n  line-height: 140%;\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 14px;\n  }\n\n  &.small {\n    font-size: 12px;\n  }\n  &.medium {\n    font-size: 14px;\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const WarningMessage = styled(Warning)`\n  color: ${COLORS.warning_500};\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"file":"styling.cjs"}

package/dist/InputFields/styling.d.ts

@@ -0,0 +1,24 @@
+export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {
+    locked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    margin?: string | undefined;
+}, never>;
+export declare const activeValidationMessageState: import("styled-components").FlattenSimpleInterpolation;
+declare const InputFieldStyling: import("styled-components").StyledComponent<"input", any, {
+    locked?: boolean | undefined;
+    activeValidationMessage?: boolean | undefined;
+    activeErrorMessage?: boolean | undefined;
+    correctInput?: boolean | undefined;
+    active?: boolean | undefined;
+    withoutBorder?: boolean | undefined;
+    size?: string | undefined;
+}, never>;
+declare const ValidationStyling: import("styled-components").FlattenSimpleInterpolation;
+export declare const RequiredStar: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Warning: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const WarningMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ErrorMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AutofilledMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { ValidationStyling, InputFieldStyling };
+export declare const StyledIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SearchIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/InputFields/styling.js

@@ -0,0 +1,38 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+
+import styled, { css } from 'styled-components';
+import { BREAKPOINTS, COLORS } from '../styles';
+import { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling } from '../styles/typography';
+import { Z_INDEXES } from '../styles/z-indexes';
+export var InputWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n  ", ";\n  ", "\n"])), function (props) {
+  return props.locked || props.disabled ? 'cursor: not-allowed;' : '';
+}, function (props) {
+  return props.margin ? "margin: ".concat(props.margin, ";") : '';
+});
+var lockedState = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", " !important;\n  color: ", " !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n"])), COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_600);
+export var activeValidationMessageState = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n  -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), COLORS.warning_400, COLORS.warning_400, COLORS.warning_400);
+var activeErrorMessageState = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n  -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), COLORS.critical_400, COLORS.critical_400, COLORS.critical_400);
+var activeCorrectInput = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n  -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), COLORS.correct_500, COLORS.correct_500, COLORS.correct_500);
+var InputFieldStyling = styled.input(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ", "\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  outline: none;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ", " !important;\n\n  ", "\n  ", "\n  ", "\n  ", "\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ", " !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n  \n  &.focus-visible{\n    outline: none;\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    z-index: ", ";\n  }\n\n  &.error {\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 2px;\n    border-color: #e97116;\n    padding: 0 15px !important;\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.error {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.active {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n  \n"])), function (props) {
+  return props.withoutBorder ? "-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      " : "-webkit-box-shadow: inset 0px 0px 0px 1px ".concat(COLORS.neutral_400, ";\n      -moz-box-shadow: inset 0px 0px 0px 1px ").concat(COLORS.neutral_400, ";\n      box-shadow: inset 0px 0px 0px 1px ").concat(COLORS.neutral_400, ";");
+}, ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600), COLORS.black, function (props) {
+  return props.locked ? lockedState : '';
+}, function (props) {
+  return props.activeValidationMessage ? activeValidationMessageState : '';
+}, function (props) {
+  return props.activeErrorMessage ? activeErrorMessageState : '';
+}, function (props) {
+  return props.correctInput ? activeCorrectInput : '';
+}, COLORS.neutral_100, COLORS.neutral_300, COLORS.primary_800, Z_INDEXES.focus, COLORS.primary_700, COLORS.primary_700, COLORS.primary_700, COLORS.primary_800, COLORS.primary_800, COLORS.primary_800);
+var ValidationStyling = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  &.error-msg {\n    ", "\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ", "\n    font-weight: 700;\n    line-height: 15px;\n  }\n"])), ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468'));
+export var RequiredStar = styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 28px;\n  line-height: 12px;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n"])), COLORS.critical_500);
+export var Warning = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  font-size: 12px;\n  line-height: 140%;\n\n  ", " {\n    font-size: 14px;\n  }\n\n  &.small {\n    font-size: 12px;\n  }\n  &.medium {\n    font-size: 14px;\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n"])), BREAKPOINTS.MEDIUM);
+export var WarningMessage = styled(Warning)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.warning_500);
+export var ErrorMessage = styled(Warning)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.critical_500);
+export var AutofilledMessage = styled(Warning)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.neutral_600);
+export { ValidationStyling, InputFieldStyling };
+export var StyledIcon = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  border-radius: 50%;\n"])));
+export var SearchIconWrapper = styled(StyledIcon)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  position: absolute;\n  border-radius: 50%;\n"])));
+//# sourceMappingURL=styling.js.map

package/dist/InputFields/styling.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/InputFields/styling.ts"],"names":["styled","css","BREAKPOINTS","COLORS","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","Z_INDEXES","InputWrapper","div","props","locked","disabled","margin","lockedState","neutral_100","neutral_300","neutral_600","activeValidationMessageState","warning_400","activeErrorMessageState","critical_400","activeCorrectInput","correct_500","InputFieldStyling","input","withoutBorder","neutral_400","Italic","MEDIUM","black","activeValidationMessage","activeErrorMessage","correctInput","primary_800","focus","primary_700","ValidationStyling","Regular","RequiredStar","span","critical_500","Warning","WarningMessage","warning_500","ErrorMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const InputWrapper = styled.div<{ locked?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300} !important;\n  color: ${COLORS.neutral_600} !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n`;\nexport const activeValidationMessageState = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\nconst activeErrorMessageState = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\nconst activeCorrectInput = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n`;\n\nconst InputFieldStyling = styled.input<{\n  locked?: boolean;\n  activeValidationMessage?: boolean;\n  activeErrorMessage?: boolean;\n  correctInput?: boolean;\n  active?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  outline: none;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.locked ? lockedState : '')}\n  ${(props) => (props.activeValidationMessage ? activeValidationMessageState : '')}\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n  ${(props) => (props.correctInput ? activeCorrectInput : '')}\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300} !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n  \n  &.focus-visible{\n    outline: none;\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    z-index: ${Z_INDEXES.focus};\n  }\n\n  &.error {\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 2px;\n    border-color: #e97116;\n    padding: 0 15px !important;\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.error {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n  \n`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const RequiredStar = styled.span`\n  color: ${COLORS.critical_500};\n  font-size: 28px;\n  line-height: 12px;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n`;\nexport const Warning = styled.div`\n  font-size: 12px;\n  line-height: 140%;\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 14px;\n  }\n\n  &.small {\n    font-size: 12px;\n  }\n  &.medium {\n    font-size: 14px;\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const WarningMessage = styled(Warning)`\n  color: ${COLORS.warning_500};\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"file":"styling.js"}