@laerdal/life-react-components 3.4.0 → 3.4.1
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.
|
@@ -26,7 +26,7 @@ var readOnlyState = (0, _styledComponents.css)(_templateObject2 || (_templateObj
|
|
|
26
26
|
exports.readOnlyState = readOnlyState;
|
|
27
27
|
var activeErrorMessageState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n box-shadow: inset 0 0 0 2px ", ";\n"])), _styles.COLORS.critical_400);
|
|
28
28
|
exports.activeErrorMessageState = activeErrorMessageState;
|
|
29
|
-
var InputFieldStyling = _styledComponents.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n height: 48px;\n width: 100%;\n border-radius: 4px;\n margin-bottom: 4px;\n\n border: 0;\n -webkit-appearance: none;\n ", "\n background-color: #fff;\n box-sizing: border-box;\n padding: 0 ", "px 0 16px !important;\n text-overflow: ellipsis;\n\n outline: none;\n position: relative;\n\n font-size: 16px;\n\n &::placeholder {\n ", "\n }\n\n ", " {\n font-size: 18px;\n line-height: 18px;\n height: 56px;\n padding: 0 16px !important;\n\n &::placeholder {\n ", "\n }\n }\n\n &.small {\n font-size: 16px;\n height: 48px;\n &::placeholder {\n font-size: 16px;\n }\n }\n &.medium {\n font-size: 18px;\n height: 56px;\n &::placeholder {\n font-size: 18px;\n }\n }\n\n color: ", " !important;\n\n ", "\n\n &:read-only:not(:disabled) {\n ", "\n }\n\n &:disabled {\n border: 1px solid ", ";\n pointer-events: none;\n box-shadow: none !important;\n outline: none;\n cursor: not-allowed;\n color: ", " !important;\n }\n &:focus:not(.focus-visible) {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &.focus-visible {\n ", "\n }\n\n &.invalid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n &.valid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n &:not(.placeholder) {\n line-height: 40px;\n }\n\n &:hover {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &.active {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &.show-checkmark.valid {\n background-image: none;\n }\n\n &.show-checkmark.pending {\n background-image: none;\n }\n"])), function (props) {
|
|
29
|
+
var InputFieldStyling = _styledComponents.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n height: 48px;\n width: 100%;\n border-radius: 4px;\n margin-bottom: 4px;\n\n border: 0;\n -webkit-appearance: none;\n ", "\n background-color: #fff;\n box-sizing: border-box;\n padding: 0 ", "px 0 16px !important;\n text-overflow: ellipsis;\n\n outline: none;\n overflow: hidden;\n position: relative;\n\n font-size: 16px;\n\n &::placeholder {\n ", "\n }\n\n ", " {\n font-size: 18px;\n line-height: 18px;\n height: 56px;\n padding: 0 16px !important;\n\n &::placeholder {\n ", "\n }\n }\n\n &.small {\n font-size: 16px;\n height: 48px;\n &::placeholder {\n font-size: 16px;\n }\n }\n &.medium {\n font-size: 18px;\n height: 56px;\n &::placeholder {\n font-size: 18px;\n }\n }\n\n color: ", " !important;\n\n ", "\n\n &:read-only:not(:disabled) {\n ", "\n }\n\n &:disabled {\n border: 1px solid ", ";\n pointer-events: none;\n box-shadow: none !important;\n outline: none;\n cursor: not-allowed;\n color: ", " !important;\n }\n &:focus:not(.focus-visible) {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &.focus-visible {\n ", "\n }\n\n &.invalid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n &.valid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n &:not(.placeholder) {\n line-height: 40px;\n }\n\n &:hover {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &.active {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &.show-checkmark.valid {\n background-image: none;\n }\n\n &.show-checkmark.pending {\n background-image: none;\n }\n"])), function (props) {
|
|
30
30
|
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, ";");
|
|
31
31
|
}, function (props) {
|
|
32
32
|
var _props$extraRightPadd;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styling.cjs","names":["InputWrapper","styled","div","props","readOnly","disabled","margin","TooltipTrigger","readOnlyState","css","COLORS","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","extraRightPadding","ComponentSStyling","ComponentTextStyle","Italic","neutral_500","BREAKPOINTS","MEDIUM","ComponentMStyling","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","focusStyles","correct_500","primary_700","ValidationStyling","ComponentXXSStyling","Regular","Warning","ComponentXSStyling","ErrorMessage","critical_500","StateColors","States","Default","Valid","Invalid","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\nimport styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport {Size, States} from '../types';\n\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\n outline: none;\n ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n position: relative;\n \n ${TooltipTrigger('hover')}\n\n`;\n\nexport const readOnlyState = css`\n background-color: ${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 extraRightPadding?: number;\n}>`\n height: 48px;\n width: 100%;\n border-radius: 4px;\n margin-bottom: 4px;\n\n border: 0;\n -webkit-appearance: none;\n ${(props) =>\n props.withoutBorder\n ? `-webkit-box-shadow: none;\n -moz-box-shadow: none;\n box-shadow: none;\n `\n : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.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 ${props => 16 + (props.extraRightPadding ?? 0)}px 0 16px !important;\n text-overflow: ellipsis;\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 &: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 margin-bottom: 4px;\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n\n svg {\n width: 16px;\n height: 16px;\n }\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n svg {\n width: 20px;\n height: 20px;\n }\n }\n\n &.small {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n svg {\n width: 16px;\n height: 16px;\n }\n }\n &.medium {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n svg {\n width: 20px;\n height: 20px;\n }\n }\n\n & * {\n vertical-align: middle;\n display: inline-block;\n }\n\n svg {\n margin-right: 4px;\n }\n`;\nexport const ErrorMessage = styled(Warning)`\n color: ${COLORS.critical_500};\n`;\n\nconst StateColors = {\n [States.Default]: COLORS.neutral_500,\n [States.Valid]: COLORS.correct_500,\n [States.Invalid]: COLORS.critical_500,\n}\n\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\n color: ${(props) => StateColors[props.type]};\n`;\n\nexport const NoteMessage = styled(Warning)`\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"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAsC;AAAA;AAAA;AAE/B,IAAMA,YAAY,GAAGC,yBAAM,CAACC,GAAG,8JAElC,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,QAAQ,IAAID,KAAK,CAACE,QAAQ,GAAG,sBAAsB,GAAG,EAAE;AAAA,CAAC,EAC3E,UAACF,KAAK;EAAA,OAAMA,KAAK,CAACG,MAAM,qBAAcH,KAAK,CAACG,MAAM,SAAM,EAAE;AAAA,CAAC,EAG3D,IAAAC,6BAAc,EAAC,OAAO,CAAC,CAE1B;AAAC;AAEK,IAAMC,aAAa,OAAGC,qBAAG,kQACVC,cAAM,CAACC,WAAW,EACRD,cAAM,CAACE,WAAW,EACvCF,cAAM,CAACG,WAAW,CAI5B;AAAC;AACK,IAAMC,uBAAuB,OAAGL,qBAAG,8HACVC,cAAM,CAACK,YAAY,CAClD;AAAC;AAEF,IAAMC,iBAAiB,GAAGf,yBAAM,CAACgB,KAAK,
|
|
1
|
+
{"version":3,"file":"styling.cjs","names":["InputWrapper","styled","div","props","readOnly","disabled","margin","TooltipTrigger","readOnlyState","css","COLORS","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","extraRightPadding","ComponentSStyling","ComponentTextStyle","Italic","neutral_500","BREAKPOINTS","MEDIUM","ComponentMStyling","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","focusStyles","correct_500","primary_700","ValidationStyling","ComponentXXSStyling","Regular","Warning","ComponentXSStyling","ErrorMessage","critical_500","StateColors","States","Default","Valid","Invalid","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\nimport styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport {Size, States} from '../types';\n\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\n outline: none;\n ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n position: relative;\n \n ${TooltipTrigger('hover')}\n\n`;\n\nexport const readOnlyState = css`\n background-color: ${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 extraRightPadding?: number;\n}>`\n height: 48px;\n width: 100%;\n border-radius: 4px;\n margin-bottom: 4px;\n\n border: 0;\n -webkit-appearance: none;\n ${(props) =>\n props.withoutBorder\n ? `-webkit-box-shadow: none;\n -moz-box-shadow: none;\n box-shadow: none;\n `\n : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.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 ${props => 16 + (props.extraRightPadding ?? 0)}px 0 16px !important;\n text-overflow: ellipsis;\n\n outline: none;\n overflow: hidden;\n position: relative;\n\n font-size: 16px;\n\n &::placeholder {\n ${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 &: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 margin-bottom: 4px;\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n\n svg {\n width: 16px;\n height: 16px;\n }\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n svg {\n width: 20px;\n height: 20px;\n }\n }\n\n &.small {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n svg {\n width: 16px;\n height: 16px;\n }\n }\n &.medium {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n svg {\n width: 20px;\n height: 20px;\n }\n }\n\n & * {\n vertical-align: middle;\n display: inline-block;\n }\n\n svg {\n margin-right: 4px;\n }\n`;\nexport const ErrorMessage = styled(Warning)`\n color: ${COLORS.critical_500};\n`;\n\nconst StateColors = {\n [States.Default]: COLORS.neutral_500,\n [States.Valid]: COLORS.correct_500,\n [States.Invalid]: COLORS.critical_500,\n}\n\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\n color: ${(props) => StateColors[props.type]};\n`;\n\nexport const NoteMessage = styled(Warning)`\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"],"mappings":"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"}
|
|
@@ -13,7 +13,7 @@ export var InputWrapper = styled.div(_templateObject || (_templateObject = _tagg
|
|
|
13
13
|
}, TooltipTrigger('hover'));
|
|
14
14
|
export var readOnlyState = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background-color: ", ";\n box-shadow: inset 0 0 0 1px ", " !important;\n color: ", " !important;\n pointer-events: none;\n outline: none;\n cursor: not-allowed;\n"])), COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_600);
|
|
15
15
|
export var activeErrorMessageState = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n box-shadow: inset 0 0 0 2px ", ";\n"])), COLORS.critical_400);
|
|
16
|
-
var InputFieldStyling = styled.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n height: 48px;\n width: 100%;\n border-radius: 4px;\n margin-bottom: 4px;\n\n border: 0;\n -webkit-appearance: none;\n ", "\n background-color: #fff;\n box-sizing: border-box;\n padding: 0 ", "px 0 16px !important;\n text-overflow: ellipsis;\n\n outline: none;\n position: relative;\n\n font-size: 16px;\n\n &::placeholder {\n ", "\n }\n\n ", " {\n font-size: 18px;\n line-height: 18px;\n height: 56px;\n padding: 0 16px !important;\n\n &::placeholder {\n ", "\n }\n }\n\n &.small {\n font-size: 16px;\n height: 48px;\n &::placeholder {\n font-size: 16px;\n }\n }\n &.medium {\n font-size: 18px;\n height: 56px;\n &::placeholder {\n font-size: 18px;\n }\n }\n\n color: ", " !important;\n\n ", "\n\n &:read-only:not(:disabled) {\n ", "\n }\n\n &:disabled {\n border: 1px solid ", ";\n pointer-events: none;\n box-shadow: none !important;\n outline: none;\n cursor: not-allowed;\n color: ", " !important;\n }\n &:focus:not(.focus-visible) {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &.focus-visible {\n ", "\n }\n\n &.invalid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n &.valid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n &:not(.placeholder) {\n line-height: 40px;\n }\n\n &:hover {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &.active {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &.show-checkmark.valid {\n background-image: none;\n }\n\n &.show-checkmark.pending {\n background-image: none;\n }\n"])), function (props) {
|
|
16
|
+
var InputFieldStyling = styled.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n height: 48px;\n width: 100%;\n border-radius: 4px;\n margin-bottom: 4px;\n\n border: 0;\n -webkit-appearance: none;\n ", "\n background-color: #fff;\n box-sizing: border-box;\n padding: 0 ", "px 0 16px !important;\n text-overflow: ellipsis;\n\n outline: none;\n overflow: hidden;\n position: relative;\n\n font-size: 16px;\n\n &::placeholder {\n ", "\n }\n\n ", " {\n font-size: 18px;\n line-height: 18px;\n height: 56px;\n padding: 0 16px !important;\n\n &::placeholder {\n ", "\n }\n }\n\n &.small {\n font-size: 16px;\n height: 48px;\n &::placeholder {\n font-size: 16px;\n }\n }\n &.medium {\n font-size: 18px;\n height: 56px;\n &::placeholder {\n font-size: 18px;\n }\n }\n\n color: ", " !important;\n\n ", "\n\n &:read-only:not(:disabled) {\n ", "\n }\n\n &:disabled {\n border: 1px solid ", ";\n pointer-events: none;\n box-shadow: none !important;\n outline: none;\n cursor: not-allowed;\n color: ", " !important;\n }\n &:focus:not(.focus-visible) {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &.focus-visible {\n ", "\n }\n\n &.invalid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n &.valid {\n box-shadow: inset 0 0 0 2px ", ";\n }\n\n &:not(.placeholder) {\n line-height: 40px;\n }\n\n &:hover {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &.active {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &.show-checkmark.valid {\n background-image: none;\n }\n\n &.show-checkmark.pending {\n background-image: none;\n }\n"])), function (props) {
|
|
17
17
|
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, ";");
|
|
18
18
|
}, function (props) {
|
|
19
19
|
var _props$extraRightPadd;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styling.js","names":["TooltipTrigger","styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentXSStyling","States","InputWrapper","div","props","readOnly","disabled","margin","readOnlyState","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","extraRightPadding","Italic","neutral_500","MEDIUM","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","correct_500","primary_700","ValidationStyling","Regular","Warning","ErrorMessage","critical_500","StateColors","Default","Valid","Invalid","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\nimport styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport {Size, States} from '../types';\n\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\n outline: none;\n ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n position: relative;\n \n ${TooltipTrigger('hover')}\n\n`;\n\nexport const readOnlyState = css`\n background-color: ${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 extraRightPadding?: number;\n}>`\n height: 48px;\n width: 100%;\n border-radius: 4px;\n margin-bottom: 4px;\n\n border: 0;\n -webkit-appearance: none;\n ${(props) =>\n props.withoutBorder\n ? `-webkit-box-shadow: none;\n -moz-box-shadow: none;\n box-shadow: none;\n `\n : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.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 ${props => 16 + (props.extraRightPadding ?? 0)}px 0 16px !important;\n text-overflow: ellipsis;\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 &: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 margin-bottom: 4px;\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n\n svg {\n width: 16px;\n height: 16px;\n }\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n svg {\n width: 20px;\n height: 20px;\n }\n }\n\n &.small {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n svg {\n width: 16px;\n height: 16px;\n }\n }\n &.medium {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n svg {\n width: 20px;\n height: 20px;\n }\n }\n\n & * {\n vertical-align: middle;\n display: inline-block;\n }\n\n svg {\n margin-right: 4px;\n }\n`;\nexport const ErrorMessage = styled(Warning)`\n color: ${COLORS.critical_500};\n`;\n\nconst StateColors = {\n [States.Default]: COLORS.neutral_500,\n [States.Valid]: COLORS.correct_500,\n [States.Invalid]: COLORS.critical_500,\n}\n\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\n color: ${(props) => StateColors[props.type]};\n`;\n\nexport const NoteMessage = styled(Warning)`\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"],"mappings":";;;AAAA,SAASA,cAAc,QAAQ,2BAA2B;AAC1D,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,WAAW,EAAEC,MAAM,EAAEC,WAAW,QAAQ,WAAW;AAC5D,SAASC,mBAAmB,EAAEC,kBAAkB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,sBAAsB;AACxI,SAAcC,MAAM,QAAO,UAAU;AAErC,OAAO,IAAMC,YAAY,GAAGX,MAAM,CAACY,GAAG,gJAElC,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,QAAQ,IAAID,KAAK,CAACE,QAAQ,GAAG,sBAAsB,GAAG,EAAE;AAAA,CAAC,EAC3E,UAACF,KAAK;EAAA,OAAMA,KAAK,CAACG,MAAM,qBAAcH,KAAK,CAACG,MAAM,SAAM,EAAE;AAAA,CAAC,EAG3DjB,cAAc,CAAC,OAAO,CAAC,CAE1B;AAED,OAAO,IAAMkB,aAAa,GAAGhB,GAAG,mPACVE,MAAM,CAACe,WAAW,EACRf,MAAM,CAACgB,WAAW,EACvChB,MAAM,CAACiB,WAAW,CAI5B;AACD,OAAO,IAAMC,uBAAuB,GAAGpB,GAAG,+GACVE,MAAM,CAACmB,YAAY,CAClD;AAED,IAAMC,iBAAiB,GAAGvB,MAAM,CAACwB,KAAK
|
|
1
|
+
{"version":3,"file":"styling.js","names":["TooltipTrigger","styled","css","BREAKPOINTS","COLORS","focusStyles","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","ComponentXSStyling","States","InputWrapper","div","props","readOnly","disabled","margin","readOnlyState","neutral_100","neutral_300","neutral_600","activeErrorMessageState","critical_400","InputFieldStyling","input","withoutBorder","neutral_400","extraRightPadding","Italic","neutral_500","MEDIUM","black","activeErrorMessage","suppressReadOnlyStyles","primary_800","correct_500","primary_700","ValidationStyling","Regular","Warning","ErrorMessage","critical_500","StateColors","Default","Valid","Invalid","ValidationMessage","type","NoteMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"sources":["../../src/InputFields/styling.ts"],"sourcesContent":["import { TooltipTrigger } from '../Tooltips/TooltipStyles';\nimport styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS, focusStyles } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling, ComponentXSStyling } from '../styles/typography';\nimport {Size, States} from '../types';\n\nexport const InputWrapper = styled.div<{ readOnly?: boolean; disabled?: boolean; margin?: string }>`\n outline: none;\n ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')};\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n position: relative;\n \n ${TooltipTrigger('hover')}\n\n`;\n\nexport const readOnlyState = css`\n background-color: ${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 extraRightPadding?: number;\n}>`\n height: 48px;\n width: 100%;\n border-radius: 4px;\n margin-bottom: 4px;\n\n border: 0;\n -webkit-appearance: none;\n ${(props) =>\n props.withoutBorder\n ? `-webkit-box-shadow: none;\n -moz-box-shadow: none;\n box-shadow: none;\n `\n : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.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 ${props => 16 + (props.extraRightPadding ?? 0)}px 0 16px !important;\n text-overflow: ellipsis;\n\n outline: none;\n overflow: hidden;\n position: relative;\n\n font-size: 16px;\n\n &::placeholder {\n ${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 &: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 margin-bottom: 4px;\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n\n svg {\n width: 16px;\n height: 16px;\n }\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n svg {\n width: 20px;\n height: 20px;\n }\n }\n\n &.small {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n svg {\n width: 16px;\n height: 16px;\n }\n }\n &.medium {\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n svg {\n width: 20px;\n height: 20px;\n }\n }\n\n & * {\n vertical-align: middle;\n display: inline-block;\n }\n\n svg {\n margin-right: 4px;\n }\n`;\nexport const ErrorMessage = styled(Warning)`\n color: ${COLORS.critical_500};\n`;\n\nconst StateColors = {\n [States.Default]: COLORS.neutral_500,\n [States.Valid]: COLORS.correct_500,\n [States.Invalid]: COLORS.critical_500,\n}\n\nexport const ValidationMessage = styled(Warning)<{ type: States.Valid | States.Invalid | States.Default}>`\n color: ${(props) => StateColors[props.type]};\n`;\n\nexport const NoteMessage = styled(Warning)`\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"],"mappings":"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"}
|