@laerdal/life-react-components 5.0.8-dev.1.full → 5.0.8-dev.2.full

package/dist/InputFields/index.cjs

@@ -18,62 +18,62 @@ var _exportNames = {
 };
 Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
-  get: function get() {
-    return _Checkbox["default"];
+  get: function () {
+    return _Checkbox.default;
   }
 });
 Object.defineProperty(exports, "DatepickerField", {
   enumerable: true,
-  get: function get() {
-    return _DatepickerField["default"];
+  get: function () {
+    return _DatepickerField.default;
   }
 });
 Object.defineProperty(exports, "InputLabel", {
   enumerable: true,
-  get: function get() {
-    return _Label["default"];
+  get: function () {
+    return _Label.default;
   }
 });
 Object.defineProperty(exports, "NumberField", {
   enumerable: true,
-  get: function get() {
-    return _NumberField["default"];
+  get: function () {
+    return _NumberField.default;
   }
 });
 Object.defineProperty(exports, "PasswordField", {
   enumerable: true,
-  get: function get() {
-    return _PasswordField["default"];
+  get: function () {
+    return _PasswordField.default;
   }
 });
 Object.defineProperty(exports, "QuickSearch", {
   enumerable: true,
-  get: function get() {
-    return _QuickSearch["default"];
+  get: function () {
+    return _QuickSearch.default;
   }
 });
 Object.defineProperty(exports, "RadioButton", {
   enumerable: true,
-  get: function get() {
-    return _RadioButton["default"];
+  get: function () {
+    return _RadioButton.default;
   }
 });
 Object.defineProperty(exports, "SearchBar", {
   enumerable: true,
-  get: function get() {
-    return _SearchBar["default"];
+  get: function () {
+    return _SearchBar.default;
   }
 });
 Object.defineProperty(exports, "TextField", {
   enumerable: true,
-  get: function get() {
-    return _TextField["default"];
+  get: function () {
+    return _TextField.default;
   }
 });
 Object.defineProperty(exports, "Textarea", {
   enumerable: true,
-  get: function get() {
-    return _Textarea["default"];
+  get: function () {
+    return _Textarea.default;
   }
 });
 var _TextField = _interopRequireDefault(require("./TextField"));
@@ -93,7 +93,7 @@ Object.keys(_styling).forEach(function (key) {
   if (key in exports && exports[key] === _styling[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
-    get: function get() {
+    get: function () {
       return _styling[key];
     }
   });
@@ -105,7 +105,7 @@ Object.keys(_RichTextField).forEach(function (key) {
   if (key in exports && exports[key] === _RichTextField[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
-    get: function get() {
+    get: function () {
       return _RichTextField[key];
     }
   });

package/dist/InputFields/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["_TextField","_interopRequireDefault","require","_PasswordField","_Checkbox","_RadioButton","_SearchBar","_Label","_DatepickerField","_Textarea","_QuickSearch","_NumberField","_styling","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_RichTextField"],"sources":["../../src/InputFields/index.ts"],"sourcesContent":["import TextField, { TextFieldProps } from './TextField';\nimport PasswordField, { PasswordFieldProps } from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton, { RadioButtonProps } from './RadioButton';\nimport SearchBar, { SearchBarProps } from './SearchBar';\nimport InputLabel, { LabelProps } from './Label';\nimport DatepickerField, { DatepickerFieldProps } from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch, { QuickSearchProps } from './QuickSearch';\nimport NumberField, { NumberFieldProps } from './NumberField';\nimport { TextareaProps, CheckboxProps } from './types';\n\nexport * from './styling';\nexport * from './RichTextField';\n\nexport { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };\n\nexport type { TextFieldProps, CheckboxProps, TextareaProps, DatepickerFieldProps, LabelProps, NumberFieldProps, PasswordFieldProps, QuickSearchProps, RadioButtonProps, SearchBarProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,SAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,YAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,UAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,MAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,gBAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,SAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,YAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,YAAA,GAAAV,sBAAA,CAAAC,OAAA;AAGA,IAAAU,QAAA,GAAAV,OAAA;AAAAW,MAAA,CAAAC,IAAA,CAAAF,QAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,QAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAZ,QAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AACA,IAAAS,cAAA,GAAAvB,OAAA;AAAAW,MAAA,CAAAC,IAAA,CAAAW,cAAA,EAAAV,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAS,cAAA,CAAAT,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAC,cAAA,CAAAT,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"file":"index.cjs","names":["_TextField","_interopRequireDefault","require","_PasswordField","_Checkbox","_RadioButton","_SearchBar","_Label","_DatepickerField","_Textarea","_QuickSearch","_NumberField","_styling","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_RichTextField"],"sources":["../../src/InputFields/index.ts"],"sourcesContent":["import TextField, { TextFieldProps } from './TextField';\r\nimport PasswordField, { PasswordFieldProps } from './PasswordField';\r\nimport Checkbox from './Checkbox';\r\nimport RadioButton, { RadioButtonProps } from './RadioButton';\r\nimport SearchBar, { SearchBarProps } from './SearchBar';\r\nimport InputLabel, { LabelProps } from './Label';\r\nimport DatepickerField, { DatepickerFieldProps } from './DatepickerField';\r\nimport Textarea from './Textarea';\r\nimport QuickSearch, { QuickSearchProps } from './QuickSearch';\r\nimport NumberField, { NumberFieldProps } from './NumberField';\r\nimport { TextareaProps, CheckboxProps } from './types';\r\n\r\nexport * from './styling';\r\nexport * from './RichTextField';\r\n\r\nexport { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };\r\n\r\nexport type { TextFieldProps, CheckboxProps, TextareaProps, DatepickerFieldProps, LabelProps, NumberFieldProps, PasswordFieldProps, QuickSearchProps, RadioButtonProps, SearchBarProps };\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,SAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,YAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,UAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,MAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,gBAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,SAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,YAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,YAAA,GAAAV,sBAAA,CAAAC,OAAA;AAGA,IAAAU,QAAA,GAAAV,OAAA;AAAAW,MAAA,CAAAC,IAAA,CAAAF,QAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAJ,QAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAZ,QAAA,CAAAI,GAAA;IAAA;EAAA;AAAA;AACA,IAAAS,cAAA,GAAAvB,OAAA;AAAAW,MAAA,CAAAC,IAAA,CAAAW,cAAA,EAAAV,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAS,cAAA,CAAAT,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,cAAA,CAAAT,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}

package/dist/InputFields/index.d.ts

@@ -1,15 +1,15 @@
-import TextField, { TextFieldProps } from './TextField';
-import PasswordField, { PasswordFieldProps } from './PasswordField';
-import Checkbox from './Checkbox';
-import RadioButton, { RadioButtonProps } from './RadioButton';
-import SearchBar, { SearchBarProps } from './SearchBar';
-import InputLabel, { LabelProps } from './Label';
-import DatepickerField, { DatepickerFieldProps } from './DatepickerField';
-import Textarea from './Textarea';
-import QuickSearch, { QuickSearchProps } from './QuickSearch';
-import NumberField, { NumberFieldProps } from './NumberField';
-import { TextareaProps, CheckboxProps } from './types';
-export * from './styling';
-export * from './RichTextField';
-export { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };
-export type { TextFieldProps, CheckboxProps, TextareaProps, DatepickerFieldProps, LabelProps, NumberFieldProps, PasswordFieldProps, QuickSearchProps, RadioButtonProps, SearchBarProps };
+import TextField, { TextFieldProps } from './TextField';
+import PasswordField, { PasswordFieldProps } from './PasswordField';
+import Checkbox from './Checkbox';
+import RadioButton, { RadioButtonProps } from './RadioButton';
+import SearchBar, { SearchBarProps } from './SearchBar';
+import InputLabel, { LabelProps } from './Label';
+import DatepickerField, { DatepickerFieldProps } from './DatepickerField';
+import Textarea from './Textarea';
+import QuickSearch, { QuickSearchProps } from './QuickSearch';
+import NumberField, { NumberFieldProps } from './NumberField';
+import { TextareaProps, CheckboxProps } from './types';
+export * from './styling';
+export * from './RichTextField';
+export { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };
+export type { TextFieldProps, CheckboxProps, TextareaProps, DatepickerFieldProps, LabelProps, NumberFieldProps, PasswordFieldProps, QuickSearchProps, RadioButtonProps, SearchBarProps };

package/dist/InputFields/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["TextField","PasswordField","Checkbox","RadioButton","SearchBar","InputLabel","DatepickerField","Textarea","QuickSearch","NumberField"],"sources":["../../src/InputFields/index.ts"],"sourcesContent":["import TextField, { TextFieldProps } from './TextField';\nimport PasswordField, { PasswordFieldProps } from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton, { RadioButtonProps } from './RadioButton';\nimport SearchBar, { SearchBarProps } from './SearchBar';\nimport InputLabel, { LabelProps } from './Label';\nimport DatepickerField, { DatepickerFieldProps } from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch, { QuickSearchProps } from './QuickSearch';\nimport NumberField, { NumberFieldProps } from './NumberField';\nimport { TextareaProps, CheckboxProps } from './types';\n\nexport * from './styling';\nexport * from './RichTextField';\n\nexport { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };\n\nexport type { TextFieldProps, CheckboxProps, TextareaProps, DatepickerFieldProps, LabelProps, NumberFieldProps, PasswordFieldProps, QuickSearchProps, RadioButtonProps, SearchBarProps };\n"],"mappings":"AAAA,OAAOA,SAAS,MAA0B,aAAa;AACvD,OAAOC,aAAa,MAA8B,iBAAiB;AACnE,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,WAAW,MAA4B,eAAe;AAC7D,OAAOC,SAAS,MAA0B,aAAa;AACvD,OAAOC,UAAU,MAAsB,SAAS;AAChD,OAAOC,eAAe,MAAgC,mBAAmB;AACzE,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,WAAW,MAA4B,eAAe;AAC7D,OAAOC,WAAW,MAA4B,eAAe;AAG7D,cAAc,WAAW;AACzB,cAAc,iBAAiB;AAE/B,SAAST,SAAS,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,SAAS,EAAEC,UAAU,EAAEC,eAAe,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,WAAW","ignoreList":[]}
+{"version":3,"file":"index.js","names":["TextField","PasswordField","Checkbox","RadioButton","SearchBar","InputLabel","DatepickerField","Textarea","QuickSearch","NumberField"],"sources":["../../src/InputFields/index.ts"],"sourcesContent":["import TextField, { TextFieldProps } from './TextField';\r\nimport PasswordField, { PasswordFieldProps } from './PasswordField';\r\nimport Checkbox from './Checkbox';\r\nimport RadioButton, { RadioButtonProps } from './RadioButton';\r\nimport SearchBar, { SearchBarProps } from './SearchBar';\r\nimport InputLabel, { LabelProps } from './Label';\r\nimport DatepickerField, { DatepickerFieldProps } from './DatepickerField';\r\nimport Textarea from './Textarea';\r\nimport QuickSearch, { QuickSearchProps } from './QuickSearch';\r\nimport NumberField, { NumberFieldProps } from './NumberField';\r\nimport { TextareaProps, CheckboxProps } from './types';\r\n\r\nexport * from './styling';\r\nexport * from './RichTextField';\r\n\r\nexport { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch, NumberField };\r\n\r\nexport type { TextFieldProps, CheckboxProps, TextareaProps, DatepickerFieldProps, LabelProps, NumberFieldProps, PasswordFieldProps, QuickSearchProps, RadioButtonProps, SearchBarProps };\r\n"],"mappings":"AAAA,OAAOA,SAAS,MAA0B,aAAa;AACvD,OAAOC,aAAa,MAA8B,iBAAiB;AACnE,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,WAAW,MAA4B,eAAe;AAC7D,OAAOC,SAAS,MAA0B,aAAa;AACvD,OAAOC,UAAU,MAAsB,SAAS;AAChD,OAAOC,eAAe,MAAgC,mBAAmB;AACzE,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,WAAW,MAA4B,eAAe;AAC7D,OAAOC,WAAW,MAA4B,eAAe;AAG7D,cAAc,WAAW;AACzB,cAAc,iBAAiB;AAE/B,SAAST,SAAS,EAAEC,aAAa,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,SAAS,EAAEC,UAAU,EAAEC,eAAe,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,WAAW","ignoreList":[]}

package/dist/InputFields/styling.cjs

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,84 +12,24 @@ var _styles = require("../styles");
 var _typography = require("../styles/typography");
 var _types = require("../types");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var InputWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  outline: none;\n  ", ";\n  ", "\n  position: relative;\n  \n  ", "\n\n"])), function (props) {
-  return props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '';
-}, function (props) {
-  return props.$margin ? "margin: ".concat(props.$margin, ";") : '';
-}, (0, _TooltipStyles.TooltipTrigger)('hover'));
-exports.InputWrapper = InputWrapper;
-var readOnlyState = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  box-shadow: inset 0 0 0 1px ", " !important;\n  color: ", " !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n"])), function (props) {
-  return _styles.COLORS.getColor('neutral_100', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_300', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_600', props.theme);
-});
-exports.readOnlyState = readOnlyState;
-var activeErrorMessageState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  box-shadow: inset 0 0 0 2px ", ";\n"])), function (props) {
-  return _styles.COLORS.getColor('critical_400', props.theme);
-});
-exports.activeErrorMessageState = activeErrorMessageState;
-var InputFieldStyling = _styledComponents["default"].input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  margin-bottom: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ", "\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 ", "px 0 16px !important;\n  text-overflow: ellipsis;\n\n  outline: none;\n  overflow: hidden;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ", " !important;\n\n  ", "\n\n  &:read-only:not(:disabled) {\n    ", "\n  }\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ", " !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n"])), function (props) {
-  return props.$withoutBorder ? "-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      " : "-webkit-box-shadow: inset 0px 0px 0px 1px ".concat(_styles.COLORS.getColor('neutral_400', props.theme), ";\n      -moz-box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.getColor('neutral_400', props.theme), ";\n      box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.getColor('neutral_400', props.theme), ";");
-}, function (props) {
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const InputWrapper = exports.InputWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  ", ";\n  ", "\n  position: relative;\n  \n  ", "\n\n"])), props => props.$readOnly || props.$disabled ? 'cursor: not-allowed;' : '', props => props.$margin ? "margin: ".concat(props.$margin, ";") : '', (0, _TooltipStyles.TooltipTrigger)('hover'));
+const readOnlyState = exports.readOnlyState = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  box-shadow: inset 0 0 0 1px ", " !important;\n  color: ", " !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n"])), props => _styles.COLORS.getColor('neutral_100', props.theme), props => _styles.COLORS.getColor('neutral_300', props.theme), props => _styles.COLORS.getColor('neutral_600', props.theme));
+const activeErrorMessageState = exports.activeErrorMessageState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: inset 0 0 0 2px ", ";\n"])), props => _styles.COLORS.getColor('critical_400', props.theme));
+const InputFieldStyling = exports.InputFieldStyling = _styledComponents.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  margin-bottom: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ", "\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 ", "px 0 16px !important;\n  text-overflow: ellipsis;\n\n  outline: none;\n  overflow: hidden;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ", " !important;\n\n  ", "\n\n  &:read-only:not(:disabled) {\n    ", "\n  }\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ", " !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n"])), props => props.$withoutBorder ? "-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      " : "-webkit-box-shadow: inset 0px 0px 0px 1px ".concat(_styles.COLORS.getColor('neutral_400', props.theme), ";\n      -moz-box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.getColor('neutral_400', props.theme), ";\n      box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.getColor('neutral_400', props.theme), ";"), props => {
   var _props$$extraRightPad;
   return 16 + ((_props$$extraRightPad = props.$extraRightPadding) !== null && _props$$extraRightPad !== void 0 ? _props$$extraRightPad : 0);
-}, function (props) {
-  return (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme));
-}, _styles.BREAKPOINTS.MEDIUM, function (props) {
-  return (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme));
-}, function (props) {
-  return _styles.COLORS.getColor('black', props.theme);
-}, function (props) {
-  return props.$activeErrorMessage ? activeErrorMessageState : '';
-}, function (props) {
-  return props.$suppressReadOnlyStyles ? '' : readOnlyState;
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_100', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('neutral_300', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_800', props.theme);
-}, _styles.focusStyles, function (props) {
-  return _styles.COLORS.getColor('critical_400', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('correct_500', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_700', props.theme);
-}, function (props) {
-  return _styles.COLORS.getColor('primary_800', props.theme);
-});
-exports.InputFieldStyling = InputFieldStyling;
-var ValidationStyling = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (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"])), function (props) {
-  return (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme));
-}, (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, '#e76468'));
-exports.ValidationStyling = ValidationStyling;
-var Warning = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 4px;\n  ", "\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ", " {\n    ", "\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ", "\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ", "\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n"])), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, null), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, null), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, null), (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, null));
-exports.Warning = Warning;
-var ErrorMessage = (0, _styledComponents["default"])(Warning)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n"])), function (props) {
-  return _styles.COLORS.getColor('critical_500', props.theme);
-});
-exports.ErrorMessage = ErrorMessage;
-var getStateColor = function getStateColor(type, theme) {
+}, props => (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme)), _styles.BREAKPOINTS.MEDIUM, props => (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.getColor('neutral_500', props.theme)), props => _styles.COLORS.getColor('black', props.theme), props => props.$activeErrorMessage ? activeErrorMessageState : '', props => props.$suppressReadOnlyStyles ? '' : readOnlyState, props => _styles.COLORS.getColor('neutral_100', props.theme), props => _styles.COLORS.getColor('neutral_300', props.theme), props => _styles.COLORS.getColor('primary_800', props.theme), _styles.focusStyles, props => _styles.COLORS.getColor('critical_400', props.theme), props => _styles.COLORS.getColor('correct_500', props.theme), props => _styles.COLORS.getColor('primary_700', props.theme), props => _styles.COLORS.getColor('primary_800', props.theme));
+const ValidationStyling = exports.ValidationStyling = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (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"])), props => (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme)), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, '#e76468'));
+const Warning = exports.Warning = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  margin-bottom: 4px;\n  ", "\n\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n\n  ", " {\n    ", "\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  &.small {\n    ", "\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  }\n  &.medium {\n    ", "\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n"])), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, null), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, null), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, null), (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, null));
+const ErrorMessage = exports.ErrorMessage = (0, _styledComponents.default)(Warning)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), props => _styles.COLORS.getColor('critical_500', props.theme));
+const getStateColor = (type, theme) => {
   if (type === _types.States.Valid) return _styles.COLORS.getColor('correct_500', theme);else if (type === _types.States.Default) return _styles.COLORS.getColor('neutral_500', theme);else return _styles.COLORS.getColor('critical_500', theme);
 };
-var ValidationMessage = (0, _styledComponents["default"])(Warning)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n"])), function (props) {
-  return getStateColor(props.type, props.theme);
-});
-exports.ValidationMessage = ValidationMessage;
-var NoteMessage = (0, _styledComponents["default"])(Warning)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n"])), function (props) {
-  return _styles.COLORS.getColor('neutral_500', props.theme);
-});
-exports.NoteMessage = NoteMessage;
-var AutofilledMessage = (0, _styledComponents["default"])(Warning)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n"])), function (props) {
-  return _styles.COLORS.getColor('neutral_600', props.theme);
-});
-exports.AutofilledMessage = AutofilledMessage;
-var StyledIcon = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n  border-radius: 50%;\n"])));
-exports.StyledIcon = StyledIcon;
-var SearchIconWrapper = (0, _styledComponents["default"])(StyledIcon)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  border-radius: 50%;\n"])));
-exports.SearchIconWrapper = SearchIconWrapper;
+const ValidationMessage = exports.ValidationMessage = (0, _styledComponents.default)(Warning)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), props => getStateColor(props.type, props.theme));
+const NoteMessage = exports.NoteMessage = (0, _styledComponents.default)(Warning)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), props => _styles.COLORS.getColor('neutral_500', props.theme));
+const AutofilledMessage = exports.AutofilledMessage = (0, _styledComponents.default)(Warning)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), props => _styles.COLORS.getColor('neutral_600', props.theme));
+const StyledIcon = exports.StyledIcon = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 50%;\n"])));
+const SearchIconWrapper = exports.SearchIconWrapper = (0, _styledComponents.default)(StyledIcon)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  border-radius: 50%;\n"])));
 //# sourceMappingURL=styling.cjs.map

package/dist/InputFields/styling.cjs.map

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

package/dist/InputFields/styling.d.ts

@@ -1,38 +1,38 @@
-/// <reference types="react" />
-import { States } from '../types';
-export declare const InputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $readOnly?: boolean | undefined;
-    $disabled?: boolean | undefined;
-    $margin?: string | undefined;
-}>> & string;
-export declare const readOnlyState: import("styled-components").RuleSet<object>;
-export declare const activeErrorMessageState: import("styled-components").RuleSet<object>;
-declare const InputFieldStyling: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
-    $activeErrorMessage?: boolean | undefined;
-    $active?: boolean | undefined;
-    $withoutBorder?: boolean | undefined;
-    $size?: string | undefined;
-    $suppressReadOnlyStyles?: boolean | undefined;
-    $extraRightPadding?: number | undefined;
-}>> & string;
-declare const ValidationStyling: import("styled-components").RuleSet<object>;
-export declare const Warning: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
-export declare const ValidationMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, {
-    type: States.Valid | States.Invalid | States.Default;
-}>> & string;
-export declare const NoteMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
-export declare const AutofilledMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
-export { ValidationStyling, InputFieldStyling };
-export declare const StyledIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SearchIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string;
+/// <reference types="react" />
+import { States } from '../types';
+export declare const InputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $readOnly?: boolean | undefined;
+    $disabled?: boolean | undefined;
+    $margin?: string | undefined;
+}>> & string;
+export declare const readOnlyState: import("styled-components").RuleSet<object>;
+export declare const activeErrorMessageState: import("styled-components").RuleSet<object>;
+declare const InputFieldStyling: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+    $activeErrorMessage?: boolean | undefined;
+    $active?: boolean | undefined;
+    $withoutBorder?: boolean | undefined;
+    $size?: string | undefined;
+    $suppressReadOnlyStyles?: boolean | undefined;
+    $extraRightPadding?: number | undefined;
+}>> & string;
+declare const ValidationStyling: import("styled-components").RuleSet<object>;
+export declare const Warning: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ErrorMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const ValidationMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, {
+    type: States.Valid | States.Invalid | States.Default;
+}>> & string;
+export declare const NoteMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const AutofilledMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export { ValidationStyling, InputFieldStyling };
+export declare const StyledIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SearchIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;

package/dist/InputFields/styling.js

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