@laerdal/life-react-components 1.8.0-dev.37 → 1.8.0-dev.39
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Button/Iconbutton.cjs +7 -5
- package/dist/Button/Iconbutton.cjs.map +1 -1
- package/dist/Button/Iconbutton.d.ts +2 -0
- package/dist/Button/Iconbutton.js +7 -5
- package/dist/Button/Iconbutton.js.map +1 -1
- package/dist/ChipsInput/ChipInputField.cjs +2 -3
- package/dist/ChipsInput/ChipInputField.cjs.map +1 -1
- package/dist/ChipsInput/ChipInputField.js +2 -3
- package/dist/ChipsInput/ChipInputField.js.map +1 -1
- package/dist/Dropdown/BasicDropdown.cjs +0 -2
- package/dist/Dropdown/BasicDropdown.cjs.map +1 -1
- package/dist/Dropdown/BasicDropdown.js +0 -2
- package/dist/Dropdown/BasicDropdown.js.map +1 -1
- package/dist/Dropdown/DropdownFilter.cjs +0 -2
- package/dist/Dropdown/DropdownFilter.cjs.map +1 -1
- package/dist/Dropdown/DropdownFilter.d.ts +1 -1
- package/dist/Dropdown/DropdownFilter.js +0 -2
- package/dist/Dropdown/DropdownFilter.js.map +1 -1
- package/dist/InputFields/DatepickerField.cjs +2 -3
- package/dist/InputFields/DatepickerField.cjs.map +1 -1
- package/dist/InputFields/DatepickerField.js +2 -3
- package/dist/InputFields/DatepickerField.js.map +1 -1
- package/dist/InputFields/Label.cjs +24 -14
- package/dist/InputFields/Label.cjs.map +1 -1
- package/dist/InputFields/Label.js +24 -16
- package/dist/InputFields/Label.js.map +1 -1
- package/dist/InputFields/PasswordField.cjs +1 -1
- package/dist/InputFields/PasswordField.cjs.map +1 -1
- package/dist/InputFields/PasswordField.js +1 -1
- package/dist/InputFields/PasswordField.js.map +1 -1
- package/dist/InputFields/QuickSearch.cjs +2 -3
- package/dist/InputFields/QuickSearch.cjs.map +1 -1
- package/dist/InputFields/QuickSearch.js +2 -3
- package/dist/InputFields/QuickSearch.js.map +1 -1
- package/dist/InputFields/TextField.cjs +26 -16
- package/dist/InputFields/TextField.cjs.map +1 -1
- package/dist/InputFields/TextField.d.ts +3 -1
- package/dist/InputFields/TextField.js +27 -18
- package/dist/InputFields/TextField.js.map +1 -1
- package/dist/InputFields/Textarea.cjs +26 -20
- package/dist/InputFields/Textarea.cjs.map +1 -1
- package/dist/InputFields/Textarea.d.ts +1 -11
- package/dist/InputFields/Textarea.js +31 -24
- package/dist/InputFields/Textarea.js.map +1 -1
- package/dist/InputFields/components/SearchBarInput.cjs +1 -1
- package/dist/InputFields/components/SearchBarInput.cjs.map +1 -1
- package/dist/InputFields/components/SearchBarInput.js +1 -1
- package/dist/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/InputFields/components/SearchField.cjs +1 -1
- package/dist/InputFields/components/SearchField.cjs.map +1 -1
- package/dist/InputFields/components/SearchField.js +1 -1
- package/dist/InputFields/components/SearchField.js.map +1 -1
- package/dist/InputFields/styling.cjs +15 -13
- package/dist/InputFields/styling.cjs.map +1 -1
- package/dist/InputFields/styling.d.ts +4 -1
- package/dist/InputFields/styling.js +13 -10
- package/dist/InputFields/styling.js.map +1 -1
- package/dist/InputFields/types.cjs +6 -0
- package/dist/InputFields/types.cjs.map +1 -0
- package/dist/InputFields/types.d.ts +38 -0
- package/dist/InputFields/types.js +2 -0
- package/dist/InputFields/types.js.map +1 -0
- package/package.json +1 -1
|
@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
7
7
|
Object.defineProperty(exports, "__esModule", {
|
|
8
8
|
value: true
|
|
9
9
|
});
|
|
10
|
-
exports.activeErrorMessageState = exports.Warning = exports.ValidationStyling = exports.StyledIcon = exports.SearchIconWrapper = exports.
|
|
10
|
+
exports.activeErrorMessageState = exports.Warning = exports.ValidationStyling = exports.ValidationMessage = exports.StyledIcon = exports.SearchIconWrapper = exports.NoteMessage = exports.InputWrapper = exports.InputFieldStyling = exports.ErrorMessage = exports.AutofilledMessage = void 0;
|
|
11
11
|
|
|
12
12
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
13
13
|
|
|
@@ -17,7 +17,7 @@ var _styles = require("../styles");
|
|
|
17
17
|
|
|
18
18
|
var _typography = require("../styles/typography");
|
|
19
19
|
|
|
20
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
|
|
20
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
|
|
21
21
|
|
|
22
22
|
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); }
|
|
23
23
|
|
|
@@ -34,9 +34,9 @@ var readOnlyState = (0, _styledComponents.css)(_templateObject2 || (_templateObj
|
|
|
34
34
|
var activeErrorMessageState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n box-shadow: inset 0 0 0 2px ", ";\n"])), _styles.COLORS.critical_400);
|
|
35
35
|
exports.activeErrorMessageState = activeErrorMessageState;
|
|
36
36
|
|
|
37
|
-
var InputFieldStyling = _styledComponents.default.input(_templateObject4 || (_templateObject4 = (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 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
|
|
37
|
+
var InputFieldStyling = _styledComponents.default.input(_templateObject4 || (_templateObject4 = (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 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 &.invalid {\n margin-bottom: 0 !important;\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) {
|
|
38
38
|
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, ";");
|
|
39
|
-
}, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.
|
|
39
|
+
}, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), _styles.COLORS.black, function (props) {
|
|
40
40
|
return props.activeErrorMessage ? activeErrorMessageState : '';
|
|
41
41
|
}, function (props) {
|
|
42
42
|
return props.suppressReadOnlyStyles ? '' : readOnlyState;
|
|
@@ -46,21 +46,23 @@ exports.InputFieldStyling = InputFieldStyling;
|
|
|
46
46
|
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"])), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, '#e76468'));
|
|
47
47
|
exports.ValidationStyling = ValidationStyling;
|
|
48
48
|
|
|
49
|
-
var
|
|
50
|
-
|
|
51
|
-
exports.RequiredStar = RequiredStar;
|
|
52
|
-
|
|
53
|
-
var Warning = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (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);
|
|
49
|
+
var Warning = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\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));
|
|
54
50
|
|
|
55
51
|
exports.Warning = Warning;
|
|
56
|
-
var ErrorMessage = (0, _styledComponents.default)(Warning)(
|
|
52
|
+
var ErrorMessage = (0, _styledComponents.default)(Warning)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n"])), _styles.COLORS.critical_500);
|
|
57
53
|
exports.ErrorMessage = ErrorMessage;
|
|
58
|
-
var
|
|
54
|
+
var ValidationMessage = (0, _styledComponents.default)(Warning)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n margin: 4px 0px;\n color: ", ";\n"])), function (props) {
|
|
55
|
+
return props.type === 'invalid' ? _styles.COLORS.critical_500 : _styles.COLORS.correct_500;
|
|
56
|
+
});
|
|
57
|
+
exports.ValidationMessage = ValidationMessage;
|
|
58
|
+
var NoteMessage = (0, _styledComponents.default)(Warning)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n margin: 4px 0px;\n color: ", ";\n"])), _styles.COLORS.neutral_500);
|
|
59
|
+
exports.NoteMessage = NoteMessage;
|
|
60
|
+
var AutofilledMessage = (0, _styledComponents.default)(Warning)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n"])), _styles.COLORS.neutral_600);
|
|
59
61
|
exports.AutofilledMessage = AutofilledMessage;
|
|
60
62
|
|
|
61
|
-
var StyledIcon = _styledComponents.default.div(
|
|
63
|
+
var StyledIcon = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: 50%;\n"])));
|
|
62
64
|
|
|
63
65
|
exports.StyledIcon = StyledIcon;
|
|
64
|
-
var SearchIconWrapper = (0, _styledComponents.default)(StyledIcon)(
|
|
66
|
+
var SearchIconWrapper = (0, _styledComponents.default)(StyledIcon)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n border-radius: 50%;\n"])));
|
|
65
67
|
exports.SearchIconWrapper = SearchIconWrapper;
|
|
66
68
|
//# sourceMappingURL=styling.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/InputFields/styling.ts"],"names":["InputWrapper","styled","div","props","readOnly","disabled","margin","readOnlyState","css","COLORS","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","ComponentTextStyle","Italic","BREAKPOINTS","MEDIUM","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","focusStyles","correct_500","primary_700","ValidationStyling","Regular","
|
|
1
|
+
{"version":3,"sources":["../../src/InputFields/styling.ts"],"names":["InputWrapper","styled","div","props","readOnly","disabled","margin","readOnlyState","css","COLORS","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","ComponentTextStyle","Italic","neutral_500","BREAKPOINTS","MEDIUM","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","focusStyles","correct_500","primary_700","ValidationStyling","Regular","Warning","ErrorMessage","critical_500","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAGO,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,yHAErB,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,QAAN,IAAkBD,KAAK,CAACE,QAAxB,GAAmC,sBAAnC,GAA4D,EAAxE;AAAA,CAFqB,EAGrB,UAACF,KAAD;AAAA,SAAYA,KAAK,CAACG,MAAN,qBAA0BH,KAAK,CAACG,MAAhC,SAA4C,EAAxD;AAAA,CAHqB,CAAlB;;;AAMP,IAAMC,aAAa,OAAGC,qBAAH,kQACGC,eAAOC,WADV,EAEaD,eAAOE,WAFpB,EAGRF,eAAOG,WAHC,CAAnB;AAQO,IAAMC,uBAAuB,OAAGL,qBAAH,8HACJC,eAAOK,YADH,CAA7B;;;AAIP,IAAMC,iBAAiB,GAAGd,0BAAOe,KAAV,ynDAanB,UAACb,KAAD;AAAA,SACAA,KAAK,CAACc,aAAN,oJAKiDR,eAAOS,WALxD,6DAM2CT,eAAOS,WANlD,wDAOsCT,eAAOS,WAP7C,MADA;AAAA,CAbmB,EAgCjB,mCAAkBC,+BAAmBC,MAArC,EAA6CX,eAAOY,WAApD,CAhCiB,EAmCnBC,oBAAYC,MAnCO,EA0Cf,mCAAkBJ,+BAAmBC,MAArC,EAA6CX,eAAOY,WAApD,CA1Ce,EA6DZZ,eAAOe,KA7DK,EA+DnB,UAACrB,KAAD;AAAA,SAAYA,KAAK,CAACsB,kBAAN,GAA2BZ,uBAA3B,GAAqD,EAAjE;AAAA,CA/DmB,EAkEjB,UAACV,KAAD;AAAA,SAAYA,KAAK,CAACuB,sBAAN,GAA+B,EAA/B,GAAoCnB,aAAhD;AAAA,CAlEiB,EAsECE,eAAOC,WAtER,EA2EVD,eAAOE,WA3EG,EA8EiBF,eAAOkB,WA9ExB,EAkFjBC,mBAlFiB,EAsFWnB,eAAOK,YAtFlB,EAyFWL,eAAOoB,WAzFlB,EAqGiBpB,eAAOqB,WArGxB,EAyGiBrB,eAAOkB,WAzGxB,CAAvB;;;AAqHA,IAAMI,iBAAiB,OAAGvB,qBAAH,sUAEjB,qCAAoBW,+BAAmBa,OAAvC,EAAgDvB,eAAOe,KAAvD,CAFiB,EAWjB,qCAAoBL,+BAAmBa,OAAvC,EAAgD,SAAhD,CAXiB,CAAvB;;;AAiBO,IAAMC,OAAO,GAAGhC,0BAAOC,GAAV,ujBAGhB,qCAAoBiB,+BAAmBa,OAAvC,EAAgD,IAAhD,CAHgB,EAUhBV,oBAAYC,MAVI,EAWd,oCAAmBJ,+BAAmBa,OAAtC,EAA+C,IAA/C,CAXc,EAmBd,qCAAoBb,+BAAmBa,OAAvC,EAAgD,IAAhD,CAnBc,EA0Bd,oCAAmBb,+BAAmBa,OAAtC,EAA+C,IAA/C,CA1Bc,CAAb;;;AA0CA,IAAME,YAAY,GAAG,+BAAOD,OAAP,CAAH,wGACdxB,eAAO0B,YADO,CAAlB;;AAIA,IAAMC,iBAAiB,GAAG,+BAAOH,OAAP,CAAH,4HAEnB,UAAC9B,KAAD;AAAA,SAAYA,KAAK,CAACkC,IAAN,KAAe,SAAf,GAA2B5B,eAAO0B,YAAlC,GAAiD1B,eAAOoB,WAApE;AAAA,CAFmB,CAAvB;;AAKA,IAAMS,WAAW,GAAG,+BAAOL,OAAP,CAAH,4HAEbxB,eAAOY,WAFM,CAAjB;;AAIA,IAAMkB,iBAAiB,GAAG,+BAAON,OAAP,CAAH,0GACnBxB,eAAOG,WADY,CAAvB;;;AAMA,IAAM4B,UAAU,GAAGvC,0BAAOC,GAAV,gHAAhB;;;AAIA,IAAMuC,iBAAiB,GAAG,+BAAOD,UAAP,CAAH,uIAAvB","sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport { Size } 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`;\n\nconst readOnlyState = css`\n background-color: ${COLORS.neutral_100};\n box-shadow: inset 0 0 0 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 activeErrorMessageState = css`\n box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\n\nconst InputFieldStyling = styled.input<{\n activeErrorMessage?: boolean;\n active?: boolean;\n withoutBorder?: boolean;\n size?: string;\n suppressReadOnlyStyles?: boolean;\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 position: relative;\n\n font-size: 16px;\n\n &::placeholder {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\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_500)}\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.activeErrorMessage ? activeErrorMessageState : '')}\n\n &:read-only:not(:disabled) {\n ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\n }\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 ${focusStyles}\n }\n\n &.invalid {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n }\n &.valid {\n box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n }\n\n &:not(.placeholder) {\n line-height: 40px;\n }\n\n &.invalid {\n margin-bottom: 0 !important;\n }\n\n &:hover {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n }\n\n &.active {\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\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 Warning = styled.div`\n display: flex;\n align-items: center;\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: ${COLORS.critical_500};\n`;\n\nexport const ValidationMessage = styled(Warning)<{ type: 'valid' | 'invalid' }>`\n margin: 4px 0px;\n color: ${(props) => (props.type === 'invalid' ? COLORS.critical_500 : COLORS.correct_500)};\n`;\n\nexport const NoteMessage = styled(Warning)`\n margin: 4px 0px;\n color: ${COLORS.neutral_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"}
|
|
@@ -12,9 +12,12 @@ declare const InputFieldStyling: import("styled-components").StyledComponent<"in
|
|
|
12
12
|
suppressReadOnlyStyles?: boolean | undefined;
|
|
13
13
|
}, never>;
|
|
14
14
|
declare const ValidationStyling: import("styled-components").FlattenSimpleInterpolation;
|
|
15
|
-
export declare const RequiredStar: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
16
15
|
export declare const Warning: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
17
16
|
export declare const ErrorMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
17
|
+
export declare const ValidationMessage: import("styled-components").StyledComponent<"div", any, {
|
|
18
|
+
type: 'valid' | 'invalid';
|
|
19
|
+
}, never>;
|
|
20
|
+
export declare const NoteMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
18
21
|
export declare const AutofilledMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
19
22
|
export { ValidationStyling, InputFieldStyling };
|
|
20
23
|
export declare const StyledIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
2
|
|
|
3
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
|
|
3
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
|
|
4
4
|
|
|
5
5
|
import styled, { css } from 'styled-components';
|
|
6
6
|
import { BREAKPOINTS, COLORS, focusStyles } from '../styles';
|
|
7
|
-
import { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling } from '../styles/typography';
|
|
7
|
+
import { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';
|
|
8
8
|
export var InputWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n outline: none;\n ", ";\n ", "\n"])), function (props) {
|
|
9
9
|
return props.readOnly || props.disabled ? 'cursor: not-allowed;' : '';
|
|
10
10
|
}, function (props) {
|
|
@@ -12,19 +12,22 @@ export var InputWrapper = styled.div(_templateObject || (_templateObject = _tagg
|
|
|
12
12
|
});
|
|
13
13
|
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"])), COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_600);
|
|
14
14
|
export var activeErrorMessageState = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n box-shadow: inset 0 0 0 2px ", ";\n"])), COLORS.critical_400);
|
|
15
|
-
var InputFieldStyling = styled.input(_templateObject4 || (_templateObject4 = _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 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
|
|
15
|
+
var InputFieldStyling = styled.input(_templateObject4 || (_templateObject4 = _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 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 &.invalid {\n margin-bottom: 0 !important;\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) {
|
|
16
16
|
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, ";");
|
|
17
|
-
}, ComponentSStyling(ComponentTextStyle.Italic, COLORS.
|
|
17
|
+
}, ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), COLORS.black, function (props) {
|
|
18
18
|
return props.activeErrorMessage ? activeErrorMessageState : '';
|
|
19
19
|
}, function (props) {
|
|
20
20
|
return props.suppressReadOnlyStyles ? '' : readOnlyState;
|
|
21
21
|
}, COLORS.neutral_100, COLORS.neutral_300, COLORS.primary_800, focusStyles, COLORS.critical_400, COLORS.correct_500, COLORS.primary_700, COLORS.primary_800);
|
|
22
22
|
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"])), ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468'));
|
|
23
|
-
export var
|
|
24
|
-
export var
|
|
25
|
-
export var
|
|
26
|
-
|
|
23
|
+
export var Warning = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\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));
|
|
24
|
+
export var ErrorMessage = styled(Warning)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n color: ", ";\n"])), COLORS.critical_500);
|
|
25
|
+
export var ValidationMessage = styled(Warning)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n margin: 4px 0px;\n color: ", ";\n"])), function (props) {
|
|
26
|
+
return props.type === 'invalid' ? COLORS.critical_500 : COLORS.correct_500;
|
|
27
|
+
});
|
|
28
|
+
export var NoteMessage = styled(Warning)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n margin: 4px 0px;\n color: ", ";\n"])), COLORS.neutral_500);
|
|
29
|
+
export var AutofilledMessage = styled(Warning)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n color: ", ";\n"])), COLORS.neutral_600);
|
|
27
30
|
export { ValidationStyling, InputFieldStyling };
|
|
28
|
-
export var StyledIcon = styled.div(
|
|
29
|
-
export var SearchIconWrapper = styled(StyledIcon)(
|
|
31
|
+
export var StyledIcon = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n border-radius: 50%;\n"])));
|
|
32
|
+
export var SearchIconWrapper = styled(StyledIcon)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n position: absolute;\n border-radius: 50%;\n"])));
|
|
30
33
|
//# sourceMappingURL=styling.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/InputFields/styling.ts"],"names":["styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","InputWrapper","div","props","readOnly","disabled","margin","readOnlyState","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","Italic","MEDIUM","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","correct_500","primary_700","ValidationStyling","Regular","
|
|
1
|
+
{"version":3,"sources":["../../src/InputFields/styling.ts"],"names":["styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentXSStyling","InputWrapper","div","props","readOnly","disabled","margin","readOnlyState","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","Italic","neutral_500","MEDIUM","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","correct_500","primary_700","ValidationStyling","Regular","Warning","ErrorMessage","critical_500","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport { Size } 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`;\n\nconst readOnlyState = css`\n background-color: ${COLORS.neutral_100};\n box-shadow: inset 0 0 0 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 activeErrorMessageState = css`\n box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n`;\n\nconst InputFieldStyling = styled.input<{\n activeErrorMessage?: boolean;\n active?: boolean;\n withoutBorder?: boolean;\n size?: string;\n suppressReadOnlyStyles?: boolean;\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 position: relative;\n\n font-size: 16px;\n\n &::placeholder {\n ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\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_500)}\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.activeErrorMessage ? activeErrorMessageState : '')}\n\n &:read-only:not(:disabled) {\n ${(props) => (props.suppressReadOnlyStyles ? '' : readOnlyState)}\n }\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 ${focusStyles}\n }\n\n &.invalid {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n }\n &.valid {\n box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\n }\n\n &:not(.placeholder) {\n line-height: 40px;\n }\n\n &.invalid {\n margin-bottom: 0 !important;\n }\n\n &:hover {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n }\n\n &.active {\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\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 Warning = styled.div`\n display: flex;\n align-items: center;\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: ${COLORS.critical_500};\n`;\n\nexport const ValidationMessage = styled(Warning)<{ type: 'valid' | 'invalid' }>`\n margin: 4px 0px;\n color: ${(props) => (props.type === 'invalid' ? COLORS.critical_500 : COLORS.correct_500)};\n`;\n\nexport const NoteMessage = styled(Warning)`\n margin: 4px 0px;\n color: ${COLORS.neutral_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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"types.cjs"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { Size } from '../types';
|
|
2
|
+
export declare type TextFieldProps = {
|
|
3
|
+
id: string;
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
readOnly?: boolean;
|
|
6
|
+
onChange?: (text: string) => void;
|
|
7
|
+
value?: string;
|
|
8
|
+
validationMessage?: string;
|
|
9
|
+
type?: string;
|
|
10
|
+
state?: 'invalid' | 'valid';
|
|
11
|
+
autoComplete?: string;
|
|
12
|
+
placeholder?: string;
|
|
13
|
+
required?: boolean;
|
|
14
|
+
pattern?: string;
|
|
15
|
+
maxLength?: number;
|
|
16
|
+
withoutBorder?: boolean;
|
|
17
|
+
size?: Size.Small | Size.Medium;
|
|
18
|
+
margin?: string;
|
|
19
|
+
note?: TextFieldNote;
|
|
20
|
+
};
|
|
21
|
+
export declare type TextareaProps = {
|
|
22
|
+
id: string;
|
|
23
|
+
placeholder: string;
|
|
24
|
+
value?: string;
|
|
25
|
+
disabled?: boolean;
|
|
26
|
+
state?: 'invalid' | 'valid';
|
|
27
|
+
onChange?: (text: string) => void;
|
|
28
|
+
validationMessage?: string;
|
|
29
|
+
size: Size.Small | Size.Medium;
|
|
30
|
+
autoHeight?: boolean;
|
|
31
|
+
margin?: string;
|
|
32
|
+
note?: TextFieldNote;
|
|
33
|
+
required: boolean;
|
|
34
|
+
};
|
|
35
|
+
export declare type TextFieldNote = {
|
|
36
|
+
message: string;
|
|
37
|
+
icon: React.ReactNode;
|
|
38
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"types.js"}
|