@laerdal/life-react-components 1.8.0-dev.21 → 1.8.0-dev.24

package/dist/InputFields/styling.cjs

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.activeErrorMessageState = exports.Warning = exports.ValidationStyling = exports.ValidationMessage = exports.StyledIcon = exports.SearchIconWrapper = exports.NoteMessage = exports.InputWrapper = exports.InputFieldStyling = exports.ErrorMessage = exports.AutofilledMessage = void 0;
+exports.activeErrorMessageState = exports.Warning = exports.ValidationStyling = exports.StyledIcon = exports.SearchIconWrapper = exports.RequiredStar = exports.InputWrapper = exports.InputFieldStyling = exports.ErrorMessage = exports.AutofilledMessage = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -17,7 +17,7 @@ var _styles = require("../styles");
 
 var _typography = require("../styles/typography");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
 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); }
 
@@ -34,9 +34,9 @@ var readOnlyState = (0, _styledComponents.css)(_templateObject2 || (_templateObj
 var activeErrorMessageState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: inset 0 0 0 2px ", ";\n"])), _styles.COLORS.critical_400);
 exports.activeErrorMessageState = activeErrorMessageState;
 
-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) {
+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  \n"])), function (props) {
   return props.withoutBorder ? "-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      " : "-webkit-box-shadow: inset 0px 0px 0px 1px ".concat(_styles.COLORS.neutral_400, ";\n      -moz-box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.neutral_400, ";\n      box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.neutral_400, ";");
-}, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), _styles.COLORS.black, function (props) {
+}, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), _styles.COLORS.black, function (props) {
   return props.activeErrorMessage ? activeErrorMessageState : '';
 }, function (props) {
   return props.suppressReadOnlyStyles ? '' : readOnlyState;
@@ -46,23 +46,21 @@ 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"])), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), (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  ", "\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));
+var RequiredStar = _styledComponents.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 28px;\n  line-height: 12px;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n"])), _styles.COLORS.critical_500);
+
+exports.RequiredStar = RequiredStar;
+
+var Warning = _styledComponents.default.div(_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);
 
 exports.Warning = Warning;
-var ErrorMessage = (0, _styledComponents.default)(Warning)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.critical_500);
+var ErrorMessage = (0, _styledComponents.default)(Warning)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.critical_500);
 exports.ErrorMessage = ErrorMessage;
-var ValidationMessage = (0, _styledComponents.default)(Warning)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 4px 0px;\n  color: ", ";\n"])), function (props) {
-  return props.type === 'invalid' ? _styles.COLORS.critical_500 : _styles.COLORS.correct_500;
-});
-exports.ValidationMessage = ValidationMessage;
-var NoteMessage = (0, _styledComponents.default)(Warning)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 4px 0px;\n  color: ", ";\n"])), _styles.COLORS.neutral_500);
-exports.NoteMessage = NoteMessage;
-var AutofilledMessage = (0, _styledComponents.default)(Warning)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.neutral_600);
+var AutofilledMessage = (0, _styledComponents.default)(Warning)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.neutral_600);
 exports.AutofilledMessage = AutofilledMessage;
 
-var StyledIcon = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 50%;\n"])));
+var StyledIcon = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (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"])));
+var SearchIconWrapper = (0, _styledComponents.default)(StyledIcon)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  border-radius: 50%;\n"])));
 exports.SearchIconWrapper = SearchIconWrapper;
 //# sourceMappingURL=styling.cjs.map

package/dist/InputFields/styling.cjs.map

@@ -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","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"}
+{"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","RequiredStar","span","critical_500","Warning","ErrorMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAEO,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,koDAanB,UAACb,KAAD;AAAA,SACAA,KAAK,CAACc,aAAN,oJAKiDR,eAAOS,WALxD,6DAM2CT,eAAOS,WANlD,wDAOsCT,eAAOS,WAP7C,MADA;AAAA,CAbmB,EAgCjB,mCAAkBC,+BAAmBC,MAArC,EAA6CX,eAAOG,WAApD,CAhCiB,EAmCnBS,oBAAYC,MAnCO,EA0Cf,mCAAkBH,+BAAmBC,MAArC,EAA6CX,eAAOG,WAApD,CA1Ce,EA6DZH,eAAOc,KA7DK,EA+DnB,UAACpB,KAAD;AAAA,SAAYA,KAAK,CAACqB,kBAAN,GAA2BX,uBAA3B,GAAqD,EAAjE;AAAA,CA/DmB,EAkEjB,UAAAV,KAAK;AAAA,SAAIA,KAAK,CAACsB,sBAAN,GAA+B,EAA/B,GAAoClB,aAAxC;AAAA,CAlEY,EAsECE,eAAOC,WAtER,EA2EVD,eAAOE,WA3EG,EA8EiBF,eAAOiB,WA9ExB,EAkFjBC,mBAlFiB,EAsFWlB,eAAOK,YAtFlB,EAyFWL,eAAOmB,WAzFlB,EAqGiBnB,eAAOoB,WArGxB,EAyGiBpB,eAAOiB,WAzGxB,CAAvB;;;AAsHA,IAAMI,iBAAiB,OAAGtB,qBAAH,sUAEjB,qCAAoBW,+BAAmBY,OAAvC,EAAgDtB,eAAOc,KAAvD,CAFiB,EAWjB,qCAAoBJ,+BAAmBY,OAAvC,EAAgD,SAAhD,CAXiB,CAAvB;;;AAiBO,IAAMC,YAAY,GAAG/B,0BAAOgC,IAAV,4MACdxB,eAAOyB,YADO,CAAlB;;;;AAQA,IAAMC,OAAO,GAAGlC,0BAAOC,GAAV,6WAIhBmB,oBAAYC,MAJI,CAAb;;;AAwBA,IAAMc,YAAY,GAAG,+BAAOD,OAAP,CAAH,wGACd1B,eAAOyB,YADO,CAAlB;;AAGA,IAAMG,iBAAiB,GAAG,+BAAOF,OAAP,CAAH,wGACnB1B,eAAOG,WADY,CAAvB;;;AAMA,IAAM0B,UAAU,GAAGrC,0BAAOC,GAAV,gHAAhB;;;AAIA,IAAMqC,iBAAiB,GAAG,+BAAOD,UAAP,CAAH,uIAAvB","sourcesContent":["import styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, focusStyles} from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling } from '../styles/typography';\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_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.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`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const RequiredStar = styled.span`\n  color: ${COLORS.critical_500};\n  font-size: 28px;\n  line-height: 12px;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n`;\nexport const Warning = styled.div`\n  font-size: 12px;\n  line-height: 140%;\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 14px;\n  }\n\n  &.small {\n    font-size: 12px;\n  }\n  &.medium {\n    font-size: 14px;\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"file":"styling.cjs"}

package/dist/InputFields/styling.d.ts

@@ -12,12 +12,9 @@ declare const InputFieldStyling: import("styled-components").StyledComponent<"in
     suppressReadOnlyStyles?: boolean | undefined;
 }, never>;
 declare const ValidationStyling: import("styled-components").FlattenSimpleInterpolation;
+export declare const RequiredStar: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Warning: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ErrorMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ValidationMessage: import("styled-components").StyledComponent<"div", any, {
-    type: 'valid' | 'invalid';
-}, never>;
-export declare const NoteMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const AutofilledMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
 export { ValidationStyling, InputFieldStyling };
 export declare const StyledIcon: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/InputFields/styling.js

@@ -1,10 +1,10 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
 import styled, { css } from 'styled-components';
 import { BREAKPOINTS, COLORS, focusStyles } from '../styles';
-import { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';
+import { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling } from '../styles/typography';
 export var InputWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n  ", ";\n  ", "\n"])), function (props) {
   return props.readOnly || props.disabled ? 'cursor: not-allowed;' : '';
 }, function (props) {
@@ -12,22 +12,19 @@ export var InputWrapper = styled.div(_templateObject || (_templateObject = _tagg
 });
 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);
 export var activeErrorMessageState = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  box-shadow: inset 0 0 0 2px ", ";\n"])), COLORS.critical_400);
-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) {
+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  \n"])), function (props) {
   return props.withoutBorder ? "-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      " : "-webkit-box-shadow: inset 0px 0px 0px 1px ".concat(COLORS.neutral_400, ";\n      -moz-box-shadow: inset 0px 0px 0px 1px ").concat(COLORS.neutral_400, ";\n      box-shadow: inset 0px 0px 0px 1px ").concat(COLORS.neutral_400, ";");
-}, ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), COLORS.black, function (props) {
+}, ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600), COLORS.black, function (props) {
   return props.activeErrorMessage ? activeErrorMessageState : '';
 }, function (props) {
   return props.suppressReadOnlyStyles ? '' : readOnlyState;
 }, COLORS.neutral_100, COLORS.neutral_300, COLORS.primary_800, focusStyles, COLORS.critical_400, COLORS.correct_500, COLORS.primary_700, COLORS.primary_800);
 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'));
-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));
-export var ErrorMessage = styled(Warning)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.critical_500);
-export var ValidationMessage = styled(Warning)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin: 4px 0px;\n  color: ", ";\n"])), function (props) {
-  return props.type === 'invalid' ? COLORS.critical_500 : COLORS.correct_500;
-});
-export var NoteMessage = styled(Warning)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin: 4px 0px;\n  color: ", ";\n"])), COLORS.neutral_500);
-export var AutofilledMessage = styled(Warning)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.neutral_600);
+export var RequiredStar = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 28px;\n  line-height: 12px;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n"])), COLORS.critical_500);
+export var Warning = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  font-size: 12px;\n  line-height: 140%;\n\n  ", " {\n    font-size: 14px;\n  }\n\n  &.small {\n    font-size: 12px;\n  }\n  &.medium {\n    font-size: 14px;\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n"])), BREAKPOINTS.MEDIUM);
+export var ErrorMessage = styled(Warning)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.critical_500);
+export var AutofilledMessage = styled(Warning)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.neutral_600);
 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 var StyledIcon = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  border-radius: 50%;\n"])));
+export var SearchIconWrapper = styled(StyledIcon)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  position: absolute;\n  border-radius: 50%;\n"])));
 //# sourceMappingURL=styling.js.map

package/dist/InputFields/styling.js.map

@@ -1 +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"}
+{"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","RequiredStar","span","critical_500","Warning","ErrorMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"mappings":";;;;AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAAQC,WAAR,EAAqBC,MAArB,EAA6BC,WAA7B,QAA+C,WAA/C;AACA,SAASC,mBAAT,EAA8BC,kBAA9B,EAAkDC,iBAAlD,EAAqEC,iBAArE,QAA8F,sBAA9F;AAEA,OAAO,IAAMC,YAAY,GAAGT,MAAM,CAACU,GAAV,2GAErB,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,GAAGd,GAAH,mPACGE,MAAM,CAACa,WADV,EAEab,MAAM,CAACc,WAFpB,EAGRd,MAAM,CAACe,WAHC,CAAnB;AAQA,OAAO,IAAMC,uBAAuB,GAAGlB,GAAH,+GACJE,MAAM,CAACiB,YADH,CAA7B;AAIP,IAAMC,iBAAiB,GAAGrB,MAAM,CAACsB,KAAV,onDAanB,UAACX,KAAD;AAAA,SACAA,KAAK,CAACY,aAAN,oJAKiDpB,MAAM,CAACqB,WALxD,6DAM2CrB,MAAM,CAACqB,WANlD,wDAOsCrB,MAAM,CAACqB,WAP7C,MADA;AAAA,CAbmB,EAgCjBjB,iBAAiB,CAACD,kBAAkB,CAACmB,MAApB,EAA4BtB,MAAM,CAACe,WAAnC,CAhCA,EAmCnBhB,WAAW,CAACwB,MAnCO,EA0CflB,iBAAiB,CAACF,kBAAkB,CAACmB,MAApB,EAA4BtB,MAAM,CAACe,WAAnC,CA1CF,EA6DZf,MAAM,CAACwB,KA7DK,EA+DnB,UAAChB,KAAD;AAAA,SAAYA,KAAK,CAACiB,kBAAN,GAA2BT,uBAA3B,GAAqD,EAAjE;AAAA,CA/DmB,EAkEjB,UAAAR,KAAK;AAAA,SAAIA,KAAK,CAACkB,sBAAN,GAA+B,EAA/B,GAAoCd,aAAxC;AAAA,CAlEY,EAsECZ,MAAM,CAACa,WAtER,EA2EVb,MAAM,CAACc,WA3EG,EA8EiBd,MAAM,CAAC2B,WA9ExB,EAkFjB1B,WAlFiB,EAsFWD,MAAM,CAACiB,YAtFlB,EAyFWjB,MAAM,CAAC4B,WAzFlB,EAqGiB5B,MAAM,CAAC6B,WArGxB,EAyGiB7B,MAAM,CAAC2B,WAzGxB,CAAvB;AAsHA,IAAMG,iBAAiB,GAAGhC,GAAH,uTAEjBI,mBAAmB,CAACC,kBAAkB,CAAC4B,OAApB,EAA6B/B,MAAM,CAACwB,KAApC,CAFF,EAWjBtB,mBAAmB,CAACC,kBAAkB,CAAC4B,OAApB,EAA6B,SAA7B,CAXF,CAAvB;AAiBA,OAAO,IAAMC,YAAY,GAAGnC,MAAM,CAACoC,IAAV,8LACdjC,MAAM,CAACkC,YADO,CAAlB;AAQP,OAAO,IAAMC,OAAO,GAAGtC,MAAM,CAACU,GAAV,+VAIhBR,WAAW,CAACwB,MAJI,CAAb;AAwBP,OAAO,IAAMa,YAAY,GAAGvC,MAAM,CAACsC,OAAD,CAAT,0FACdnC,MAAM,CAACkC,YADO,CAAlB;AAGP,OAAO,IAAMG,iBAAiB,GAAGxC,MAAM,CAACsC,OAAD,CAAT,0FACnBnC,MAAM,CAACe,WADY,CAAvB;AAIP,SAASe,iBAAT,EAA4BZ,iBAA5B;AAEA,OAAO,IAAMoB,UAAU,GAAGzC,MAAM,CAACU,GAAV,kGAAhB;AAIP,OAAO,IAAMgC,iBAAiB,GAAG1C,MAAM,CAACyC,UAAD,CAAT,yHAAvB","sourcesContent":["import styled, { css } from 'styled-components';\nimport {BREAKPOINTS, COLORS, focusStyles} from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling } from '../styles/typography';\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_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.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`;\n\nconst ValidationStyling = css`\n  &.error-msg {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}\n    font-weight: 700;\n    line-height: 15px;\n  }\n`;\n\nexport const RequiredStar = styled.span`\n  color: ${COLORS.critical_500};\n  font-size: 28px;\n  line-height: 12px;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n`;\nexport const Warning = styled.div`\n  font-size: 12px;\n  line-height: 140%;\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 14px;\n  }\n\n  &.small {\n    font-size: 12px;\n  }\n  &.medium {\n    font-size: 14px;\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"file":"styling.js"}

package/dist/Tile/TileBody.cjs

@@ -21,7 +21,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 var _templateObject;
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  margin: 8px 6px 8px 0;\n  overflow: auto;\n  box-sizing: border-box;\n\n  &.small {\n    padding-right: 10px;\n    padding-left: 16px;\n  }\n\n  &.medium {\n    padding-right: 14px;\n    padding-left: 20px;\n  }\n\n  &.large {\n    padding-right: 18px;\n    padding-left: 24px;\n  }\n\n  ", "\n"])), (0, _styles.scrollBarStyling)(_types.Size.Small));
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  margin: 8px;\n  overflow: auto;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 0 8px;\n  }\n\n  &.medium {\n    padding: 0 12px;\n  }\n\n  &.large {\n    padding: 0 16px;\n  }\n\n  ", "\n"])), (0, _styles.scrollBarStyling)(_types.Size.Small));
 
 var TileBody = function TileBody(_ref) {
   var children = _ref.children,

package/dist/Tile/TileBody.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tile/TileBody.tsx"],"names":["Wrapper","styled","div","Size","Small","TileBody","children","size"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,0YAqBT,8BAAiBC,YAAKC,KAAtB,CArBS,CAAb;;AAwBA,IAAMC,QAAiD,GAAG,SAApDA,QAAoD,OAAsB;AAAA,MAApBC,QAAoB,QAApBA,QAAoB;AAAA,MAAVC,IAAU,QAAVA,IAAU;AAG9E,sBACE,qBAAC,OAAD;AAAS,IAAA,SAAS,EAAEA,IAApB;AAAA,cACGD;AADH,IADF;AAKD,CARD;;eAWeD,Q","sourcesContent":["import React from 'react'\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {scrollBarStyling} from '../styles';\n\nconst Wrapper = styled.div`\n  flex: 1;\n  margin: 8px 6px 8px 0;\n  overflow: auto;\n  box-sizing: border-box;\n\n  &.small {\n    padding-right: 10px;\n    padding-left: 16px;\n  }\n\n  &.medium {\n    padding-right: 14px;\n    padding-left: 20px;\n  }\n\n  &.large {\n    padding-right: 18px;\n    padding-left: 24px;\n  }\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst TileBody: React.FunctionComponent<{ size: Size }> = ({children, size}) => {\n\n\n  return (\n    <Wrapper className={size}>\n      {children}\n    </Wrapper>\n  )\n}\n\n\nexport default TileBody;\n"],"file":"TileBody.cjs"}
+{"version":3,"sources":["../../src/Tile/TileBody.tsx"],"names":["Wrapper","styled","div","Size","Small","TileBody","children","size"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,wSAkBT,8BAAiBC,YAAKC,KAAtB,CAlBS,CAAb;;AAqBA,IAAMC,QAAiD,GAAG,SAApDA,QAAoD,OAAsB;AAAA,MAApBC,QAAoB,QAApBA,QAAoB;AAAA,MAAVC,IAAU,QAAVA,IAAU;AAG9E,sBACE,qBAAC,OAAD;AAAS,IAAA,SAAS,EAAEA,IAApB;AAAA,cACGD;AADH,IADF;AAKD,CARD;;eAWeD,Q","sourcesContent":["import React from 'react'\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {scrollBarStyling} from '../styles';\n\nconst Wrapper = styled.div`\n  flex: 1;\n  margin: 8px;\n  overflow: auto;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 0 8px;\n  }\n\n  &.medium {\n    padding: 0 12px;\n  }\n\n  &.large {\n    padding: 0 16px;\n  }\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst TileBody: React.FunctionComponent<{ size: Size }> = ({children, size}) => {\n\n\n  return (\n    <Wrapper className={size}>\n      {children}\n    </Wrapper>\n  )\n}\n\n\nexport default TileBody;\n"],"file":"TileBody.cjs"}

package/dist/Tile/TileBody.js

@@ -7,7 +7,7 @@ import { Size } from '../types';
 import styled from 'styled-components';
 import { scrollBarStyling } from '../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  margin: 8px 6px 8px 0;\n  overflow: auto;\n  box-sizing: border-box;\n\n  &.small {\n    padding-right: 10px;\n    padding-left: 16px;\n  }\n\n  &.medium {\n    padding-right: 14px;\n    padding-left: 20px;\n  }\n\n  &.large {\n    padding-right: 18px;\n    padding-left: 24px;\n  }\n\n  ", "\n"])), scrollBarStyling(Size.Small));
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1;\n  margin: 8px;\n  overflow: auto;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 0 8px;\n  }\n\n  &.medium {\n    padding: 0 12px;\n  }\n\n  &.large {\n    padding: 0 16px;\n  }\n\n  ", "\n"])), scrollBarStyling(Size.Small));
 
 var TileBody = function TileBody(_ref) {
   var children = _ref.children,

package/dist/Tile/TileBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tile/TileBody.tsx"],"names":["React","Size","styled","scrollBarStyling","Wrapper","div","Small","TileBody","children","size"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,gBAAR,QAA+B,WAA/B;;AAEA,IAAMC,OAAO,GAAGF,MAAM,CAACG,GAAV,4XAqBTF,gBAAgB,CAACF,IAAI,CAACK,KAAN,CArBP,CAAb;;AAwBA,IAAMC,QAAiD,GAAG,SAApDA,QAAoD,OAAsB;AAAA,MAApBC,QAAoB,QAApBA,QAAoB;AAAA,MAAVC,IAAU,QAAVA,IAAU;AAG9E,sBACE,KAAC,OAAD;AAAS,IAAA,SAAS,EAAEA,IAApB;AAAA,cACGD;AADH,IADF;AAKD,CARD;;AAWA,eAAeD,QAAf","sourcesContent":["import React from 'react'\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {scrollBarStyling} from '../styles';\n\nconst Wrapper = styled.div`\n  flex: 1;\n  margin: 8px 6px 8px 0;\n  overflow: auto;\n  box-sizing: border-box;\n\n  &.small {\n    padding-right: 10px;\n    padding-left: 16px;\n  }\n\n  &.medium {\n    padding-right: 14px;\n    padding-left: 20px;\n  }\n\n  &.large {\n    padding-right: 18px;\n    padding-left: 24px;\n  }\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst TileBody: React.FunctionComponent<{ size: Size }> = ({children, size}) => {\n\n\n  return (\n    <Wrapper className={size}>\n      {children}\n    </Wrapper>\n  )\n}\n\n\nexport default TileBody;\n"],"file":"TileBody.js"}
+{"version":3,"sources":["../../src/Tile/TileBody.tsx"],"names":["React","Size","styled","scrollBarStyling","Wrapper","div","Small","TileBody","children","size"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,IAAR,QAAmB,UAAnB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,gBAAR,QAA+B,WAA/B;;AAEA,IAAMC,OAAO,GAAGF,MAAM,CAACG,GAAV,0RAkBTF,gBAAgB,CAACF,IAAI,CAACK,KAAN,CAlBP,CAAb;;AAqBA,IAAMC,QAAiD,GAAG,SAApDA,QAAoD,OAAsB;AAAA,MAApBC,QAAoB,QAApBA,QAAoB;AAAA,MAAVC,IAAU,QAAVA,IAAU;AAG9E,sBACE,KAAC,OAAD;AAAS,IAAA,SAAS,EAAEA,IAApB;AAAA,cACGD;AADH,IADF;AAKD,CARD;;AAWA,eAAeD,QAAf","sourcesContent":["import React from 'react'\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {scrollBarStyling} from '../styles';\n\nconst Wrapper = styled.div`\n  flex: 1;\n  margin: 8px;\n  overflow: auto;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 0 8px;\n  }\n\n  &.medium {\n    padding: 0 12px;\n  }\n\n  &.large {\n    padding: 0 16px;\n  }\n\n  ${scrollBarStyling(Size.Small)}\n`;\n\nconst TileBody: React.FunctionComponent<{ size: Size }> = ({children, size}) => {\n\n\n  return (\n    <Wrapper className={size}>\n      {children}\n    </Wrapper>\n  )\n}\n\n\nexport default TileBody;\n"],"file":"TileBody.js"}

package/dist/Tile/TileCommonItems.cjs

@@ -60,7 +60,7 @@ var TileHyperLinkText = _styledComponents.default.div(_templateObject5 || (_temp
 
 exports.TileHyperLinkText = TileHyperLinkText;
 
-var TileHyperLinkWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: max-content;\n\n  ", "\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n"])), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.primary_500), TileHyperLinkIcon, TileHyperLinkText, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null));
+var TileHyperLinkWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: max-content;\n\n  ", "\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ", " {\n      width: 28px;\n      height: 28px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n"])), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.primary_500), TileHyperLinkIcon, TileHyperLinkText, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null));
 
 exports.TileHyperLinkWrapper = TileHyperLinkWrapper;
 

package/dist/Tile/TileCommonItems.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tile/TileCommonItems.tsx"],"names":["TileNoteText","styled","div","TileNoteIcon","TileNoteWrapper","COLORS","neutral_600","ComponentTextStyle","Regular","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","RenderTileItem","item","size","key","undefined","componentType","action","disabled","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","noteIcon","React","cloneElement","Size","Large","noteText","linkText","linkIcon","rest","buttonText"],"mappings":"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","sourcesContent":["import {\n  TileDropdownButton,\n  TileHyperLink,\n  TileIconButton,\n  TileNote,\n  TileStandardButton,\n  TileToggleButton\n} from './TileTypes';\nimport {Button, IconButton} from '../Button';\nimport {ToggleButton} from '../Toggles';\nimport {DropdownButton} from '../Dropdown';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n  COLORS, ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {HyperLink} from '../HyperLink';\nimport {Size} from '../types';\n\n\nexport const TileNoteText = styled.div``;\nexport const TileNoteIcon = styled.div``;\nexport const TileNoteWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: ${COLORS.neutral_600};\n\n  &.small {\n    gap: 4px;\n\n    ${TileNoteIcon} {\n      width: 16px;\n      height: 16px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ${TileNoteIcon} {\n      width: 16px;\n      height: 16px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n  }\n\n  &.large {\n    gap: 8px;\n\n    ${TileNoteIcon} {\n      width: 20px;\n      height: 20px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n  }\n`;\n\n\nexport const TileHyperLinkIcon = styled.div``;\nexport const TileHyperLinkText = styled.div``;\n\nexport const TileHyperLinkWrapper = styled.div`\n  width: max-content;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n`\n\nexport const RenderTileItem = (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink,\n                               size: Size,\n                               key: any | undefined = undefined) => {\n  switch (item.componentType) {\n    case 'icon': {\n      return <IconButton key={key}\n                         variant={'secondary'}\n                         useTransparentBackground={true}\n                         shape={'circular'}\n                         action={item.action}\n                         disabled={item.disabled}>\n        {item.icon}\n      </IconButton>\n    }\n    case 'toggle': {\n      return <ToggleButton key={key}\n                           active={item.active}\n                           onChange={item.onChange}\n                           defaultState={item.defaultState}\n                           activeState={item.activeState}\n                           disabled={item.disabled}/>\n    }\n    case 'dropdown': {\n      return <DropdownButton key={key}\n                             type={'icon'}\n                             items={item.items}\n                             itemsType={item.itemsType}\n                             onClick={item.onClick}\n                             icon={item.icon}\n                             action={item.action}\n                             actionIcon={item.actionIcon}\n                             actionLabel={item.actionLabel}\n                             actionVariant={item.actionVariant}\n                             actionLoading={item.actionLoading}\n                             multiSelect={item.multiSelect}\n                             scrollable={item.scrollable}\n                             pinTopItem={item.pinTopItem}\n                             maxHeight={item.maxHeight}\n                             disabled={item.disabled}/>\n\n    }\n    case 'note': {\n      return <TileNoteWrapper key={key} className={size}>\n        {\n          item.noteIcon &&\n          <TileNoteIcon>\n            {React.cloneElement(item.noteIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16'})}\n          </TileNoteIcon>\n        }\n        <TileNoteText>{item.noteText}</TileNoteText>\n      </TileNoteWrapper>\n\n    }\n    case 'link': {\n      const {linkText, componentType, linkIcon, ...rest} = item;\n      return <TileHyperLinkWrapper className={size} key={key}>\n        <HyperLink {...rest}>\n          <TileHyperLinkIcon>\n            {React.cloneElement(linkIcon as React.ReactElement, {size: size === Size.Large ? '28px' : '24px'})}\n          </TileHyperLinkIcon>\n          <TileHyperLinkText>{linkText}</TileHyperLinkText>\n        </HyperLink>\n      </TileHyperLinkWrapper>\n    }\n    case 'button': {\n      const {buttonText, componentType, ...rest} = item;\n      return <Button key={key}\n                     size={size}\n                     {...rest}>\n        {buttonText}\n      </Button>\n    }\n  }\n}\n"],"file":"TileCommonItems.cjs"}
+{"version":3,"sources":["../../src/Tile/TileCommonItems.tsx"],"names":["TileNoteText","styled","div","TileNoteIcon","TileNoteWrapper","COLORS","neutral_600","ComponentTextStyle","Regular","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","RenderTileItem","item","size","key","undefined","componentType","action","disabled","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","noteIcon","React","cloneElement","Size","Large","noteText","linkText","linkIcon","rest","buttonText"],"mappings":"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","sourcesContent":["import {\n  TileDropdownButton,\n  TileHyperLink,\n  TileIconButton,\n  TileNote,\n  TileStandardButton,\n  TileToggleButton\n} from './TileTypes';\nimport {Button, IconButton} from '../Button';\nimport {ToggleButton} from '../Toggles';\nimport {DropdownButton} from '../Dropdown';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n  COLORS, ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {HyperLink} from '../HyperLink';\nimport {Size} from '../types';\n\n\nexport const TileNoteText = styled.div``;\nexport const TileNoteIcon = styled.div``;\nexport const TileNoteWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: ${COLORS.neutral_600};\n\n  &.small {\n    gap: 4px;\n\n    ${TileNoteIcon} {\n      width: 16px;\n      height: 16px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ${TileNoteIcon} {\n      width: 16px;\n      height: 16px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n  }\n\n  &.large {\n    gap: 8px;\n\n    ${TileNoteIcon} {\n      width: 20px;\n      height: 20px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n  }\n`;\n\n\nexport const TileHyperLinkIcon = styled.div``;\nexport const TileHyperLinkText = styled.div``;\n\nexport const TileHyperLinkWrapper = styled.div`\n  width: max-content;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ${TileHyperLinkIcon} {\n      width: 28px;\n      height: 28px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n`\n\nexport const RenderTileItem = (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink,\n                               size: Size,\n                               key: any | undefined = undefined) => {\n  switch (item.componentType) {\n    case 'icon': {\n      return <IconButton key={key}\n                         variant={'secondary'}\n                         useTransparentBackground={true}\n                         shape={'circular'}\n                         action={item.action}\n                         disabled={item.disabled}>\n        {item.icon}\n      </IconButton>\n    }\n    case 'toggle': {\n      return <ToggleButton key={key}\n                           active={item.active}\n                           onChange={item.onChange}\n                           defaultState={item.defaultState}\n                           activeState={item.activeState}\n                           disabled={item.disabled}/>\n    }\n    case 'dropdown': {\n      return <DropdownButton key={key}\n                             type={'icon'}\n                             items={item.items}\n                             itemsType={item.itemsType}\n                             onClick={item.onClick}\n                             icon={item.icon}\n                             action={item.action}\n                             actionIcon={item.actionIcon}\n                             actionLabel={item.actionLabel}\n                             actionVariant={item.actionVariant}\n                             actionLoading={item.actionLoading}\n                             multiSelect={item.multiSelect}\n                             scrollable={item.scrollable}\n                             pinTopItem={item.pinTopItem}\n                             maxHeight={item.maxHeight}\n                             disabled={item.disabled}/>\n\n    }\n    case 'note': {\n      return <TileNoteWrapper key={key} className={size}>\n        {\n          item.noteIcon &&\n          <TileNoteIcon>\n            {React.cloneElement(item.noteIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16'})}\n          </TileNoteIcon>\n        }\n        <TileNoteText>{item.noteText}</TileNoteText>\n      </TileNoteWrapper>\n\n    }\n    case 'link': {\n      const {linkText, componentType, linkIcon, ...rest} = item;\n      return <TileHyperLinkWrapper className={size} key={key}>\n        <HyperLink {...rest}>\n          <TileHyperLinkIcon>\n            {React.cloneElement(linkIcon as React.ReactElement, {size: size === Size.Large ? '28px' : '24px'})}\n          </TileHyperLinkIcon>\n          <TileHyperLinkText>{linkText}</TileHyperLinkText>\n        </HyperLink>\n      </TileHyperLinkWrapper>\n    }\n    case 'button': {\n      const {buttonText, componentType, ...rest} = item;\n      return <Button key={key}\n                     size={size}\n                     {...rest}>\n        {buttonText}\n      </Button>\n    }\n  }\n}\n"],"file":"TileCommonItems.cjs"}

package/dist/Tile/TileCommonItems.js

@@ -25,7 +25,7 @@ export var TileNoteIcon = styled.div(_templateObject2 || (_templateObject2 = _ta
 export var TileNoteWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: ", ";\n\n  &.small {\n    gap: 4px;\n\n    ", " {\n      width: 16px;\n      height: 16px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ", " {\n      width: 16px;\n      height: 16px;\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    gap: 8px;\n\n    ", " {\n      width: 20px;\n      height: 20px;\n    }\n\n    ", " {\n      ", "\n    }\n  }\n"])), COLORS.neutral_600, TileNoteIcon, TileNoteText, ComponentXXSStyling(ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, ComponentXSStyling(ComponentTextStyle.Regular, null), TileNoteIcon, TileNoteText, ComponentSStyling(ComponentTextStyle.Regular, null));
 export var TileHyperLinkIcon = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral([""])));
 export var TileHyperLinkText = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral([""])));
-export var TileHyperLinkWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: max-content;\n\n  ", "\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500), TileHyperLinkIcon, TileHyperLinkText, ComponentSStyling(ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, ComponentMStyling(ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, ComponentLStyling(ComponentTextStyle.Bold, null));
+export var TileHyperLinkWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: max-content;\n\n  ", "\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ", " {\n      width: 24px;\n      height: 24px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ", " {\n      width: 28px;\n      height: 28px;\n    }\n\n    ", " {\n      ", "\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500), TileHyperLinkIcon, TileHyperLinkText, ComponentSStyling(ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, ComponentMStyling(ComponentTextStyle.Bold, null), TileHyperLinkIcon, TileHyperLinkText, ComponentLStyling(ComponentTextStyle.Bold, null));
 export var RenderTileItem = function RenderTileItem(item, size) {
   var key = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
 

package/dist/Tile/TileCommonItems.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tile/TileCommonItems.tsx"],"names":["Button","IconButton","ToggleButton","DropdownButton","React","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","HyperLink","Size","TileNoteText","div","TileNoteIcon","TileNoteWrapper","neutral_600","Regular","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","RenderTileItem","item","size","key","undefined","componentType","action","disabled","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","noteIcon","cloneElement","Large","noteText","linkText","linkIcon","rest","buttonText"],"mappings":"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","sourcesContent":["import {\n  TileDropdownButton,\n  TileHyperLink,\n  TileIconButton,\n  TileNote,\n  TileStandardButton,\n  TileToggleButton\n} from './TileTypes';\nimport {Button, IconButton} from '../Button';\nimport {ToggleButton} from '../Toggles';\nimport {DropdownButton} from '../Dropdown';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n  COLORS, ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {HyperLink} from '../HyperLink';\nimport {Size} from '../types';\n\n\nexport const TileNoteText = styled.div``;\nexport const TileNoteIcon = styled.div``;\nexport const TileNoteWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: ${COLORS.neutral_600};\n\n  &.small {\n    gap: 4px;\n\n    ${TileNoteIcon} {\n      width: 16px;\n      height: 16px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ${TileNoteIcon} {\n      width: 16px;\n      height: 16px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n  }\n\n  &.large {\n    gap: 8px;\n\n    ${TileNoteIcon} {\n      width: 20px;\n      height: 20px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n  }\n`;\n\n\nexport const TileHyperLinkIcon = styled.div``;\nexport const TileHyperLinkText = styled.div``;\n\nexport const TileHyperLinkWrapper = styled.div`\n  width: max-content;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n`\n\nexport const RenderTileItem = (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink,\n                               size: Size,\n                               key: any | undefined = undefined) => {\n  switch (item.componentType) {\n    case 'icon': {\n      return <IconButton key={key}\n                         variant={'secondary'}\n                         useTransparentBackground={true}\n                         shape={'circular'}\n                         action={item.action}\n                         disabled={item.disabled}>\n        {item.icon}\n      </IconButton>\n    }\n    case 'toggle': {\n      return <ToggleButton key={key}\n                           active={item.active}\n                           onChange={item.onChange}\n                           defaultState={item.defaultState}\n                           activeState={item.activeState}\n                           disabled={item.disabled}/>\n    }\n    case 'dropdown': {\n      return <DropdownButton key={key}\n                             type={'icon'}\n                             items={item.items}\n                             itemsType={item.itemsType}\n                             onClick={item.onClick}\n                             icon={item.icon}\n                             action={item.action}\n                             actionIcon={item.actionIcon}\n                             actionLabel={item.actionLabel}\n                             actionVariant={item.actionVariant}\n                             actionLoading={item.actionLoading}\n                             multiSelect={item.multiSelect}\n                             scrollable={item.scrollable}\n                             pinTopItem={item.pinTopItem}\n                             maxHeight={item.maxHeight}\n                             disabled={item.disabled}/>\n\n    }\n    case 'note': {\n      return <TileNoteWrapper key={key} className={size}>\n        {\n          item.noteIcon &&\n          <TileNoteIcon>\n            {React.cloneElement(item.noteIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16'})}\n          </TileNoteIcon>\n        }\n        <TileNoteText>{item.noteText}</TileNoteText>\n      </TileNoteWrapper>\n\n    }\n    case 'link': {\n      const {linkText, componentType, linkIcon, ...rest} = item;\n      return <TileHyperLinkWrapper className={size} key={key}>\n        <HyperLink {...rest}>\n          <TileHyperLinkIcon>\n            {React.cloneElement(linkIcon as React.ReactElement, {size: size === Size.Large ? '28px' : '24px'})}\n          </TileHyperLinkIcon>\n          <TileHyperLinkText>{linkText}</TileHyperLinkText>\n        </HyperLink>\n      </TileHyperLinkWrapper>\n    }\n    case 'button': {\n      const {buttonText, componentType, ...rest} = item;\n      return <Button key={key}\n                     size={size}\n                     {...rest}>\n        {buttonText}\n      </Button>\n    }\n  }\n}\n"],"file":"TileCommonItems.js"}
+{"version":3,"sources":["../../src/Tile/TileCommonItems.tsx"],"names":["Button","IconButton","ToggleButton","DropdownButton","React","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","HyperLink","Size","TileNoteText","div","TileNoteIcon","TileNoteWrapper","neutral_600","Regular","TileHyperLinkIcon","TileHyperLinkText","TileHyperLinkWrapper","Bold","primary_500","RenderTileItem","item","size","key","undefined","componentType","action","disabled","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight","noteIcon","cloneElement","Large","noteText","linkText","linkIcon","rest","buttonText"],"mappings":"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","sourcesContent":["import {\n  TileDropdownButton,\n  TileHyperLink,\n  TileIconButton,\n  TileNote,\n  TileStandardButton,\n  TileToggleButton\n} from './TileTypes';\nimport {Button, IconButton} from '../Button';\nimport {ToggleButton} from '../Toggles';\nimport {DropdownButton} from '../Dropdown';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n  COLORS, ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {HyperLink} from '../HyperLink';\nimport {Size} from '../types';\n\n\nexport const TileNoteText = styled.div``;\nexport const TileNoteIcon = styled.div``;\nexport const TileNoteWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: ${COLORS.neutral_600};\n\n  &.small {\n    gap: 4px;\n\n    ${TileNoteIcon} {\n      width: 16px;\n      height: 16px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n  }\n\n  &.medium {\n    gap: 6px;\n\n    ${TileNoteIcon} {\n      width: 16px;\n      height: 16px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n  }\n\n  &.large {\n    gap: 8px;\n\n    ${TileNoteIcon} {\n      width: 20px;\n      height: 20px;\n    }\n\n    ${TileNoteText} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n  }\n`;\n\n\nexport const TileHyperLinkIcon = styled.div``;\nexport const TileHyperLinkText = styled.div``;\n\nexport const TileHyperLinkWrapper = styled.div`\n  width: max-content;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.primary_500)}\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 4px;\n  }\n\n  &.small {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 4px;\n    }\n  }\n\n  &.medium {\n    ${TileHyperLinkIcon} {\n      width: 24px;\n      height: 24px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 6px;\n    }\n  }\n\n  &.large {\n    ${TileHyperLinkIcon} {\n      width: 28px;\n      height: 28px;\n    }\n\n    ${TileHyperLinkText} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n    a {\n      gap: 8px;\n    }\n  }\n`\n\nexport const RenderTileItem = (item: TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton | TileNote | TileHyperLink,\n                               size: Size,\n                               key: any | undefined = undefined) => {\n  switch (item.componentType) {\n    case 'icon': {\n      return <IconButton key={key}\n                         variant={'secondary'}\n                         useTransparentBackground={true}\n                         shape={'circular'}\n                         action={item.action}\n                         disabled={item.disabled}>\n        {item.icon}\n      </IconButton>\n    }\n    case 'toggle': {\n      return <ToggleButton key={key}\n                           active={item.active}\n                           onChange={item.onChange}\n                           defaultState={item.defaultState}\n                           activeState={item.activeState}\n                           disabled={item.disabled}/>\n    }\n    case 'dropdown': {\n      return <DropdownButton key={key}\n                             type={'icon'}\n                             items={item.items}\n                             itemsType={item.itemsType}\n                             onClick={item.onClick}\n                             icon={item.icon}\n                             action={item.action}\n                             actionIcon={item.actionIcon}\n                             actionLabel={item.actionLabel}\n                             actionVariant={item.actionVariant}\n                             actionLoading={item.actionLoading}\n                             multiSelect={item.multiSelect}\n                             scrollable={item.scrollable}\n                             pinTopItem={item.pinTopItem}\n                             maxHeight={item.maxHeight}\n                             disabled={item.disabled}/>\n\n    }\n    case 'note': {\n      return <TileNoteWrapper key={key} className={size}>\n        {\n          item.noteIcon &&\n          <TileNoteIcon>\n            {React.cloneElement(item.noteIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16'})}\n          </TileNoteIcon>\n        }\n        <TileNoteText>{item.noteText}</TileNoteText>\n      </TileNoteWrapper>\n\n    }\n    case 'link': {\n      const {linkText, componentType, linkIcon, ...rest} = item;\n      return <TileHyperLinkWrapper className={size} key={key}>\n        <HyperLink {...rest}>\n          <TileHyperLinkIcon>\n            {React.cloneElement(linkIcon as React.ReactElement, {size: size === Size.Large ? '28px' : '24px'})}\n          </TileHyperLinkIcon>\n          <TileHyperLinkText>{linkText}</TileHyperLinkText>\n        </HyperLink>\n      </TileHyperLinkWrapper>\n    }\n    case 'button': {\n      const {buttonText, componentType, ...rest} = item;\n      return <Button key={key}\n                     size={size}\n                     {...rest}>\n        {buttonText}\n      </Button>\n    }\n  }\n}\n"],"file":"TileCommonItems.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "1.8.0-dev.21",
+  "version": "1.8.0-dev.24",
   "private": false,
   "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
   "contributors": [

package/dist/InputFields/types.cjs

@@ -1,6 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-//# sourceMappingURL=types.cjs.map

package/dist/InputFields/types.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"types.cjs"}

package/dist/InputFields/types.d.ts

@@ -1,38 +0,0 @@
-import { Size } from '../types';
-export declare type TextFieldProps = {
-    id: string;
-    disabled?: boolean;
-    readOnly?: boolean;
-    onChange?: (text: string) => void;
-    value?: string;
-    validationMessage?: string;
-    type?: string;
-    state?: 'invalid' | 'valid';
-    autoComplete?: string;
-    placeholder?: string;
-    required?: boolean;
-    pattern?: string;
-    maxLength?: number;
-    withoutBorder?: boolean;
-    size?: Size.Small | Size.Medium;
-    margin?: string;
-    note?: TextFieldNote;
-};
-export declare type TextareaProps = {
-    id: string;
-    placeholder: string;
-    value?: string;
-    disabled?: boolean;
-    state?: 'invalid' | 'valid';
-    onChange?: (text: string) => void;
-    validationMessage?: string;
-    size: Size.Small | Size.Medium;
-    autoHeight?: boolean;
-    margin?: string;
-    note?: TextFieldNote;
-    required: boolean;
-};
-export declare type TextFieldNote = {
-    message: string;
-    icon: React.ReactNode;
-};

package/dist/InputFields/types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=types.js.map

package/dist/InputFields/types.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"types.js"}