@laerdal/life-react-components 3.4.0 → 3.4.2

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.
Files changed (9) hide show
  1. package/dist/Dropdown/CommonStyling.cjs +1 -1
  2. package/dist/Dropdown/CommonStyling.cjs.map +1 -1
  3. package/dist/Dropdown/CommonStyling.js +1 -1
  4. package/dist/Dropdown/CommonStyling.js.map +1 -1
  5. package/dist/InputFields/styling.cjs +1 -1
  6. package/dist/InputFields/styling.cjs.map +1 -1
  7. package/dist/InputFields/styling.js +1 -1
  8. package/dist/InputFields/styling.js.map +1 -1
  9. package/package.json +1 -1
package/dist/Dropdown/CommonStyling.cjs CHANGED
@@ -28,7 +28,7 @@ var lockedState = (0, _styledComponents.css)(_templateObject2 || (_templateObjec
28
28
  var disabledState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n box-shadow: inset 0px 0px 0px 1px ", ";\n color: ", ";\n pointer-events: none;\n cursor: not-allowed;\n\n .dropdown-arrow {\n color: ", " !important;\n }\n\n input {\n color: ", " !important;\n\n ::placeholder {\n color: ", " !important;\n }\n }\n"])), _styles.COLORS.white, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
29
29
  var activeValidationMessage = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n box-shadow: inset 0px 0px 0px 2px ", ";\n"])), _styles.COLORS.critical_400);
30
30
  var placeholderStyling = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n"])), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600));
31
- var DropdownInputField = _styledComponents.default.input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n border: none;\n outline: none;\n background-color: inherit;\n cursor: pointer;\n color: ", " !important;\n padding: 0;\n flex-grow: 1;\n display: flex;\n justify-content: center;\n ", "\n \n ::placeholder {\n color: ", ";\n font-style: italic;\n }\n\n ::-webkit-search-decoration,\n ::-webkit-search-cancel-button,\n ::-webkit-search-results-button,\n ::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n"])), _styles.COLORS.black, function (props) {
31
+ var DropdownInputField = _styledComponents.default.input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n border: none;\n outline: none;\n background-color: inherit;\n cursor: pointer;\n color: ", " !important;\n padding: 0;\n flex-grow: 1;\n display: flex;\n justify-content: center;\n overflow: hidden;\n ", "\n \n ::placeholder {\n color: ", ";\n font-style: italic;\n }\n\n ::-webkit-search-decoration,\n ::-webkit-search-cancel-button,\n ::-webkit-search-results-button,\n ::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n"])), _styles.COLORS.black, function (props) {
32
32
  return props.ellipsis ? 'text-overflow: ellipsis;' : '';
33
33
  }, _styles.COLORS.neutral_600);
34
34
  exports.DropdownInputField = DropdownInputField;
package/dist/Dropdown/CommonStyling.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CommonStyling.cjs","names":["DropdownContainer","styled","div","props","isButton","minWidth","readOnly","disabled","margin","Z_INDEXES","focus","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","critical_400","placeholderStyling","ComponentMStyling","ComponentTextStyle","Italic","DropdownInputField","input","black","ellipsis","DropdownInputFieldStyles","ComponentSStyling","Regular","neutral_400","TooltipTrigger","ComponentXXSStyling","BREAKPOINTS","MEDIUM","ComponentXSStyling","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","CommonInteractionStyling","dropdown","focusStyles","DropdownContentButtonStyling","DropdownButtonTextContent","DropdownButtonTextIcon","DropdownButtonTextArrow","DropdownButtonTextStyles","DropdownButtonTextWrapper","primary_20","primary_700","primary_100"],"sources":["../../src/Dropdown/CommonStyling.tsx"],"sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {\n ComponentMStyling,\n ComponentLStyling,\n ComponentSStyling,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles/typography';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport { TooltipTrigger, Tooltip } from '../Tooltips/TooltipStyles';\n\nexport const DropdownContainer = styled.div<{ isButton: boolean; readOnly?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n display: inline-block;\n\n ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')}\n ${(props) => (props.margin ? `margin: ${props.margin};` : 'margin-bottom: 4px;')}\n .show {\n display: block;\n }\n\n .value {\n flex-grow: 1;\n }\n\n &:focus-within {\n z-index: ${Z_INDEXES.focus};\n }\n\n input:hover + div {\n color: ${COLORS.primary_600};\n }\n\n input:active + div {\n color: ${COLORS.primary_800};\n }\n\n\n`;\n\nconst lockedState = css`\n background-color: ${COLORS.neutral_100};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n color: ${COLORS.neutral_600};\n pointer-events: none;\n cursor: not-allowed;\n\n input {\n color: ${COLORS.neutral_600} !important;\n }\n\n .dropdown-arrow {\n color: ${COLORS.neutral_300} !important;\n }\n`;\n\nconst disabledState = css`\n background-color: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n pointer-events: none;\n cursor: not-allowed;\n\n .dropdown-arrow {\n color: ${COLORS.neutral_300} !important;\n }\n\n input {\n color: ${COLORS.neutral_300} !important;\n\n ::placeholder {\n color: ${COLORS.neutral_300} !important;\n }\n }\n`;\n\nconst activeValidationMessage = css`\n box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\n\nconst placeholderStyling = css`\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const DropdownInputField = styled.input<{ellipsis?: boolean}>`\n border: none;\n outline: none;\n background-color: inherit;\n cursor: pointer;\n color: ${COLORS.black} !important;\n padding: 0;\n flex-grow: 1;\n display: flex;\n justify-content: center;\n ${props => props.ellipsis ? 'text-overflow: ellipsis;' : ''}\n \n ::placeholder {\n color: ${COLORS.neutral_600};\n font-style: italic;\n }\n\n ::-webkit-search-decoration,\n ::-webkit-search-cancel-button,\n ::-webkit-search-results-button,\n ::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n`;\n\nexport const DropdownInputFieldStyles = styled.div<{ disabled: boolean; readOnly: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n padding: 12px 16px;\n height: 48px;\n min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n width: 100%;\n\n background: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n box-sizing: border-box;\n border-radius: 4px;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n gap: 4px;\n position: relative;\n\n input {\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n }\n\n ${TooltipTrigger('hover')}\n\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n padding: 16px;\n height: 56px;\n\n &::placeholder {\n ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n padding: 12px 16px;\n height: 48px;\n\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n height: 56px;\n padding: 16px;\n\n &::placeholder {\n ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n .dropdown-arrow {\n pointer-events: none;\n width: 24px;\n height: 24px;\n color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\n }\n\n &:focus {\n outline: 3px solid #ddd;\n }\n\n &:focus-within,\n &.focus-visible-within {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n\n &:hover:not(.action-within) {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n\n input {\n ::placeholder {\n color: ${COLORS.primary_600};\n }\n }\n\n .dropdown-arrow {\n color: ${COLORS.primary_600};\n }\n\n cursor: pointer;\n }\n\n &:active:not(.action-within) {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n\n input {\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n\n .dropdown-arrow {\n color: ${COLORS.primary_800};\n }\n }\n\n &.button {\n ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n box-sizing: border-box;\n height: 32px;\n padding: 0 8px;\n width: initial;\n min-width: initial;\n border: none !important;\n box-shadow: none;\n border-radius: 4px;\n\n &.expanded {\n color: ${COLORS.neutral_800};\n background: ${COLORS.neutral_20};\n }\n }\n\n\n ${(props) => (props.disabled ? disabledState : '')}\n ${(props) => (props.readOnly ? lockedState : '')}\n ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n ${CommonInteractionStyling};\n\n &.focus-visible,\n &.focus-visible-within {\n z-index: ${Z_INDEXES.dropdown + 1} !important;\n ${focusStyles}\n }\n`;\n\nexport const DropdownContentButtonStyling = css`\n min-width: 344px;\n`;\n\n\n\nexport const DropdownButtonTextContent = styled.div`\n display: flex;\n gap: 4px;\n align-items: center;\n box-sizing: border-box;\n min-width: 64px;\n min-height: 32px;\n padding: 4px 8px;\n border-radius: 4px;\n`;\n\nexport const DropdownButtonTextIcon = styled.div`\n width: 24px;\n height: 24px;\n`;\n\nexport const DropdownButtonTextArrow = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n pointer-events: none;\n }\n`;\n\nexport const DropdownButtonTextStyles = styled.div`\n flex: 1\n`;\n\nexport const DropdownButtonTextWrapper = styled.div`\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n align-items: center;\n width: fit-content;\n cursor: pointer;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n\n .expanded {\n color: ${COLORS.neutral_800};\n\n ${DropdownButtonTextContent} {\n background: ${COLORS.neutral_20};\n }\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:hover:not(.disabled) {\n ${DropdownButtonTextContent} {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n }\n\n &:active:not(.disabled) {\n ${DropdownButtonTextContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n color: ${COLORS.neutral_300};\n }\n\n}`;\n"],"mappings":"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"}
1
+ {"version":3,"file":"CommonStyling.cjs","names":["DropdownContainer","styled","div","props","isButton","minWidth","readOnly","disabled","margin","Z_INDEXES","focus","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","critical_400","placeholderStyling","ComponentMStyling","ComponentTextStyle","Italic","DropdownInputField","input","black","ellipsis","DropdownInputFieldStyles","ComponentSStyling","Regular","neutral_400","TooltipTrigger","ComponentXXSStyling","BREAKPOINTS","MEDIUM","ComponentXSStyling","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","CommonInteractionStyling","dropdown","focusStyles","DropdownContentButtonStyling","DropdownButtonTextContent","DropdownButtonTextIcon","DropdownButtonTextArrow","DropdownButtonTextStyles","DropdownButtonTextWrapper","primary_20","primary_700","primary_100"],"sources":["../../src/Dropdown/CommonStyling.tsx"],"sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {\n ComponentMStyling,\n ComponentLStyling,\n ComponentSStyling,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles/typography';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport { TooltipTrigger, Tooltip } from '../Tooltips/TooltipStyles';\n\nexport const DropdownContainer = styled.div<{ isButton: boolean; readOnly?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n display: inline-block;\n\n ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')}\n ${(props) => (props.margin ? `margin: ${props.margin};` : 'margin-bottom: 4px;')}\n .show {\n display: block;\n }\n\n .value {\n flex-grow: 1;\n }\n\n &:focus-within {\n z-index: ${Z_INDEXES.focus};\n }\n\n input:hover + div {\n color: ${COLORS.primary_600};\n }\n\n input:active + div {\n color: ${COLORS.primary_800};\n }\n\n\n`;\n\nconst lockedState = css`\n background-color: ${COLORS.neutral_100};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n color: ${COLORS.neutral_600};\n pointer-events: none;\n cursor: not-allowed;\n\n input {\n color: ${COLORS.neutral_600} !important;\n }\n\n .dropdown-arrow {\n color: ${COLORS.neutral_300} !important;\n }\n`;\n\nconst disabledState = css`\n background-color: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n pointer-events: none;\n cursor: not-allowed;\n\n .dropdown-arrow {\n color: ${COLORS.neutral_300} !important;\n }\n\n input {\n color: ${COLORS.neutral_300} !important;\n\n ::placeholder {\n color: ${COLORS.neutral_300} !important;\n }\n }\n`;\n\nconst activeValidationMessage = css`\n box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\n\nconst placeholderStyling = css`\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const DropdownInputField = styled.input<{ellipsis?: boolean}>`\n border: none;\n outline: none;\n background-color: inherit;\n cursor: pointer;\n color: ${COLORS.black} !important;\n padding: 0;\n flex-grow: 1;\n display: flex;\n justify-content: center;\n overflow: hidden;\n ${props => props.ellipsis ? 'text-overflow: ellipsis;' : ''}\n \n ::placeholder {\n color: ${COLORS.neutral_600};\n font-style: italic;\n }\n\n ::-webkit-search-decoration,\n ::-webkit-search-cancel-button,\n ::-webkit-search-results-button,\n ::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n`;\n\nexport const DropdownInputFieldStyles = styled.div<{ disabled: boolean; readOnly: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n padding: 12px 16px;\n height: 48px;\n min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n width: 100%;\n\n background: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n box-sizing: border-box;\n border-radius: 4px;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n gap: 4px;\n position: relative;\n\n input {\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n }\n\n ${TooltipTrigger('hover')}\n\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n padding: 16px;\n height: 56px;\n\n &::placeholder {\n ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n padding: 12px 16px;\n height: 48px;\n\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n height: 56px;\n padding: 16px;\n\n &::placeholder {\n ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n .dropdown-arrow {\n pointer-events: none;\n width: 24px;\n height: 24px;\n color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\n }\n\n &:focus {\n outline: 3px solid #ddd;\n }\n\n &:focus-within,\n &.focus-visible-within {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n\n &:hover:not(.action-within) {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n\n input {\n ::placeholder {\n color: ${COLORS.primary_600};\n }\n }\n\n .dropdown-arrow {\n color: ${COLORS.primary_600};\n }\n\n cursor: pointer;\n }\n\n &:active:not(.action-within) {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n\n input {\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n\n .dropdown-arrow {\n color: ${COLORS.primary_800};\n }\n }\n\n &.button {\n ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n box-sizing: border-box;\n height: 32px;\n padding: 0 8px;\n width: initial;\n min-width: initial;\n border: none !important;\n box-shadow: none;\n border-radius: 4px;\n\n &.expanded {\n color: ${COLORS.neutral_800};\n background: ${COLORS.neutral_20};\n }\n }\n\n\n ${(props) => (props.disabled ? disabledState : '')}\n ${(props) => (props.readOnly ? lockedState : '')}\n ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n ${CommonInteractionStyling};\n\n &.focus-visible,\n &.focus-visible-within {\n z-index: ${Z_INDEXES.dropdown + 1} !important;\n ${focusStyles}\n }\n`;\n\nexport const DropdownContentButtonStyling = css`\n min-width: 344px;\n`;\n\n\n\nexport const DropdownButtonTextContent = styled.div`\n display: flex;\n gap: 4px;\n align-items: center;\n box-sizing: border-box;\n min-width: 64px;\n min-height: 32px;\n padding: 4px 8px;\n border-radius: 4px;\n`;\n\nexport const DropdownButtonTextIcon = styled.div`\n width: 24px;\n height: 24px;\n`;\n\nexport const DropdownButtonTextArrow = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n pointer-events: none;\n }\n`;\n\nexport const DropdownButtonTextStyles = styled.div`\n flex: 1\n`;\n\nexport const DropdownButtonTextWrapper = styled.div`\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n align-items: center;\n width: fit-content;\n cursor: pointer;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n\n .expanded {\n color: ${COLORS.neutral_800};\n\n ${DropdownButtonTextContent} {\n background: ${COLORS.neutral_20};\n }\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:hover:not(.disabled) {\n ${DropdownButtonTextContent} {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n }\n\n &:active:not(.disabled) {\n ${DropdownButtonTextContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n color: ${COLORS.neutral_300};\n }\n\n}`;\n"],"mappings":"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"}
package/dist/Dropdown/CommonStyling.js CHANGED
@@ -17,7 +17,7 @@ var lockedState = css(_templateObject2 || (_templateObject2 = _taggedTemplateLit
17
17
  var disabledState = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background-color: ", ";\n box-shadow: inset 0px 0px 0px 1px ", ";\n color: ", ";\n pointer-events: none;\n cursor: not-allowed;\n\n .dropdown-arrow {\n color: ", " !important;\n }\n\n input {\n color: ", " !important;\n\n ::placeholder {\n color: ", " !important;\n }\n }\n"])), COLORS.white, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_300);
18
18
  var activeValidationMessage = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n box-shadow: inset 0px 0px 0px 2px ", ";\n"])), COLORS.critical_400);
19
19
  var placeholderStyling = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n ", "\n"])), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600));
20
- export var DropdownInputField = styled.input(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n border: none;\n outline: none;\n background-color: inherit;\n cursor: pointer;\n color: ", " !important;\n padding: 0;\n flex-grow: 1;\n display: flex;\n justify-content: center;\n ", "\n \n ::placeholder {\n color: ", ";\n font-style: italic;\n }\n\n ::-webkit-search-decoration,\n ::-webkit-search-cancel-button,\n ::-webkit-search-results-button,\n ::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n"])), COLORS.black, function (props) {
20
+ export var DropdownInputField = styled.input(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n border: none;\n outline: none;\n background-color: inherit;\n cursor: pointer;\n color: ", " !important;\n padding: 0;\n flex-grow: 1;\n display: flex;\n justify-content: center;\n overflow: hidden;\n ", "\n \n ::placeholder {\n color: ", ";\n font-style: italic;\n }\n\n ::-webkit-search-decoration,\n ::-webkit-search-cancel-button,\n ::-webkit-search-results-button,\n ::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n"])), COLORS.black, function (props) {
21
21
  return props.ellipsis ? 'text-overflow: ellipsis;' : '';
22
22
  }, COLORS.neutral_600);
23
23
  export var DropdownInputFieldStyles = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n ", "\n\n padding: 12px 16px;\n height: 48px;\n min-width: ", ";\n width: 100%;\n\n background: ", ";\n box-shadow: inset 0px 0px 0px 1px ", ";\n box-sizing: border-box;\n border-radius: 4px;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n gap: 4px;\n position: relative;\n\n input {\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n }\n\n ", "\n\n &::placeholder {\n ", "\n }\n\n ", " {\n ", "\n padding: 16px;\n height: 56px;\n\n &::placeholder {\n ", "\n }\n }\n\n &.small {\n ", "\n padding: 12px 16px;\n height: 48px;\n\n &::placeholder {\n ", "\n }\n }\n\n &.medium {\n ", "\n height: 56px;\n padding: 16px;\n\n &::placeholder {\n ", "\n }\n }\n\n .dropdown-arrow {\n pointer-events: none;\n width: 24px;\n height: 24px;\n color: ", ";\n }\n\n &:focus {\n outline: 3px solid #ddd;\n }\n\n &:focus-within,\n &.focus-visible-within {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &:hover:not(.action-within) {\n box-shadow: inset 0px 0px 0px 1px ", ";\n\n input {\n ::placeholder {\n color: ", ";\n }\n }\n\n .dropdown-arrow {\n color: ", ";\n }\n\n cursor: pointer;\n }\n\n &:active:not(.action-within) {\n box-shadow: inset 0px 0px 0px 1px ", ";\n\n input {\n ::placeholder {\n color: ", ";\n }\n }\n\n .dropdown-arrow {\n color: ", ";\n }\n }\n\n &.button {\n ", "\n\n box-sizing: border-box;\n height: 32px;\n padding: 0 8px;\n width: initial;\n min-width: initial;\n border: none !important;\n box-shadow: none;\n border-radius: 4px;\n\n &.expanded {\n color: ", ";\n background: ", ";\n }\n }\n\n\n ", "\n ", "\n ", "\n ", "\n\n ", ";\n\n &.focus-visible,\n &.focus-visible-within {\n z-index: ", " !important;\n ", "\n }\n"])), ComponentSStyling(ComponentTextStyle.Regular, 'inherit'), function (props) {
package/dist/Dropdown/CommonStyling.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CommonStyling.js","names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Z_INDEXES","TooltipTrigger","DropdownContainer","div","props","isButton","minWidth","readOnly","disabled","margin","focus","primary_600","primary_800","lockedState","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","critical_400","placeholderStyling","Italic","DropdownInputField","input","black","ellipsis","DropdownInputFieldStyles","Regular","neutral_400","MEDIUM","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","dropdown","DropdownContentButtonStyling","DropdownButtonTextContent","DropdownButtonTextIcon","DropdownButtonTextArrow","DropdownButtonTextStyles","DropdownButtonTextWrapper","primary_20","primary_700","primary_100"],"sources":["../../src/Dropdown/CommonStyling.tsx"],"sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {\n ComponentMStyling,\n ComponentLStyling,\n ComponentSStyling,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles/typography';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport { TooltipTrigger, Tooltip } from '../Tooltips/TooltipStyles';\n\nexport const DropdownContainer = styled.div<{ isButton: boolean; readOnly?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n display: inline-block;\n\n ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')}\n ${(props) => (props.margin ? `margin: ${props.margin};` : 'margin-bottom: 4px;')}\n .show {\n display: block;\n }\n\n .value {\n flex-grow: 1;\n }\n\n &:focus-within {\n z-index: ${Z_INDEXES.focus};\n }\n\n input:hover + div {\n color: ${COLORS.primary_600};\n }\n\n input:active + div {\n color: ${COLORS.primary_800};\n }\n\n\n`;\n\nconst lockedState = css`\n background-color: ${COLORS.neutral_100};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n color: ${COLORS.neutral_600};\n pointer-events: none;\n cursor: not-allowed;\n\n input {\n color: ${COLORS.neutral_600} !important;\n }\n\n .dropdown-arrow {\n color: ${COLORS.neutral_300} !important;\n }\n`;\n\nconst disabledState = css`\n background-color: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n pointer-events: none;\n cursor: not-allowed;\n\n .dropdown-arrow {\n color: ${COLORS.neutral_300} !important;\n }\n\n input {\n color: ${COLORS.neutral_300} !important;\n\n ::placeholder {\n color: ${COLORS.neutral_300} !important;\n }\n }\n`;\n\nconst activeValidationMessage = css`\n box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\n\nconst placeholderStyling = css`\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const DropdownInputField = styled.input<{ellipsis?: boolean}>`\n border: none;\n outline: none;\n background-color: inherit;\n cursor: pointer;\n color: ${COLORS.black} !important;\n padding: 0;\n flex-grow: 1;\n display: flex;\n justify-content: center;\n ${props => props.ellipsis ? 'text-overflow: ellipsis;' : ''}\n \n ::placeholder {\n color: ${COLORS.neutral_600};\n font-style: italic;\n }\n\n ::-webkit-search-decoration,\n ::-webkit-search-cancel-button,\n ::-webkit-search-results-button,\n ::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n`;\n\nexport const DropdownInputFieldStyles = styled.div<{ disabled: boolean; readOnly: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n padding: 12px 16px;\n height: 48px;\n min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n width: 100%;\n\n background: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n box-sizing: border-box;\n border-radius: 4px;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n gap: 4px;\n position: relative;\n\n input {\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n }\n\n ${TooltipTrigger('hover')}\n\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n padding: 16px;\n height: 56px;\n\n &::placeholder {\n ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n padding: 12px 16px;\n height: 48px;\n\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n height: 56px;\n padding: 16px;\n\n &::placeholder {\n ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n .dropdown-arrow {\n pointer-events: none;\n width: 24px;\n height: 24px;\n color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\n }\n\n &:focus {\n outline: 3px solid #ddd;\n }\n\n &:focus-within,\n &.focus-visible-within {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n\n &:hover:not(.action-within) {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n\n input {\n ::placeholder {\n color: ${COLORS.primary_600};\n }\n }\n\n .dropdown-arrow {\n color: ${COLORS.primary_600};\n }\n\n cursor: pointer;\n }\n\n &:active:not(.action-within) {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n\n input {\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n\n .dropdown-arrow {\n color: ${COLORS.primary_800};\n }\n }\n\n &.button {\n ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n box-sizing: border-box;\n height: 32px;\n padding: 0 8px;\n width: initial;\n min-width: initial;\n border: none !important;\n box-shadow: none;\n border-radius: 4px;\n\n &.expanded {\n color: ${COLORS.neutral_800};\n background: ${COLORS.neutral_20};\n }\n }\n\n\n ${(props) => (props.disabled ? disabledState : '')}\n ${(props) => (props.readOnly ? lockedState : '')}\n ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n ${CommonInteractionStyling};\n\n &.focus-visible,\n &.focus-visible-within {\n z-index: ${Z_INDEXES.dropdown + 1} !important;\n ${focusStyles}\n }\n`;\n\nexport const DropdownContentButtonStyling = css`\n min-width: 344px;\n`;\n\n\n\nexport const DropdownButtonTextContent = styled.div`\n display: flex;\n gap: 4px;\n align-items: center;\n box-sizing: border-box;\n min-width: 64px;\n min-height: 32px;\n padding: 4px 8px;\n border-radius: 4px;\n`;\n\nexport const DropdownButtonTextIcon = styled.div`\n width: 24px;\n height: 24px;\n`;\n\nexport const DropdownButtonTextArrow = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n pointer-events: none;\n }\n`;\n\nexport const DropdownButtonTextStyles = styled.div`\n flex: 1\n`;\n\nexport const DropdownButtonTextWrapper = styled.div`\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n align-items: center;\n width: fit-content;\n cursor: pointer;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n\n .expanded {\n color: ${COLORS.neutral_800};\n\n ${DropdownButtonTextContent} {\n background: ${COLORS.neutral_20};\n }\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:hover:not(.disabled) {\n ${DropdownButtonTextContent} {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n }\n\n &:active:not(.disabled) {\n ${DropdownButtonTextContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n color: ${COLORS.neutral_300};\n }\n\n}`;\n"],"mappings":"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"}
1
+ {"version":3,"file":"CommonStyling.js","names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Z_INDEXES","TooltipTrigger","DropdownContainer","div","props","isButton","minWidth","readOnly","disabled","margin","focus","primary_600","primary_800","lockedState","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","critical_400","placeholderStyling","Italic","DropdownInputField","input","black","ellipsis","DropdownInputFieldStyles","Regular","neutral_400","MEDIUM","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","dropdown","DropdownContentButtonStyling","DropdownButtonTextContent","DropdownButtonTextIcon","DropdownButtonTextArrow","DropdownButtonTextStyles","DropdownButtonTextWrapper","primary_20","primary_700","primary_100"],"sources":["../../src/Dropdown/CommonStyling.tsx"],"sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {\n ComponentMStyling,\n ComponentLStyling,\n ComponentSStyling,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles/typography';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport { TooltipTrigger, Tooltip } from '../Tooltips/TooltipStyles';\n\nexport const DropdownContainer = styled.div<{ isButton: boolean; readOnly?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n display: inline-block;\n\n ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')}\n ${(props) => (props.margin ? `margin: ${props.margin};` : 'margin-bottom: 4px;')}\n .show {\n display: block;\n }\n\n .value {\n flex-grow: 1;\n }\n\n &:focus-within {\n z-index: ${Z_INDEXES.focus};\n }\n\n input:hover + div {\n color: ${COLORS.primary_600};\n }\n\n input:active + div {\n color: ${COLORS.primary_800};\n }\n\n\n`;\n\nconst lockedState = css`\n background-color: ${COLORS.neutral_100};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n color: ${COLORS.neutral_600};\n pointer-events: none;\n cursor: not-allowed;\n\n input {\n color: ${COLORS.neutral_600} !important;\n }\n\n .dropdown-arrow {\n color: ${COLORS.neutral_300} !important;\n }\n`;\n\nconst disabledState = css`\n background-color: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n pointer-events: none;\n cursor: not-allowed;\n\n .dropdown-arrow {\n color: ${COLORS.neutral_300} !important;\n }\n\n input {\n color: ${COLORS.neutral_300} !important;\n\n ::placeholder {\n color: ${COLORS.neutral_300} !important;\n }\n }\n`;\n\nconst activeValidationMessage = css`\n box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\n\nconst placeholderStyling = css`\n ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const DropdownInputField = styled.input<{ellipsis?: boolean}>`\n border: none;\n outline: none;\n background-color: inherit;\n cursor: pointer;\n color: ${COLORS.black} !important;\n padding: 0;\n flex-grow: 1;\n display: flex;\n justify-content: center;\n overflow: hidden;\n ${props => props.ellipsis ? 'text-overflow: ellipsis;' : ''}\n \n ::placeholder {\n color: ${COLORS.neutral_600};\n font-style: italic;\n }\n\n ::-webkit-search-decoration,\n ::-webkit-search-cancel-button,\n ::-webkit-search-results-button,\n ::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n`;\n\nexport const DropdownInputFieldStyles = styled.div<{ disabled: boolean; readOnly: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n padding: 12px 16px;\n height: 48px;\n min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n width: 100%;\n\n background: ${COLORS.white};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n box-sizing: border-box;\n border-radius: 4px;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n gap: 4px;\n position: relative;\n\n input {\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n }\n\n ${TooltipTrigger('hover')}\n\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n\n ${BREAKPOINTS.MEDIUM} {\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n padding: 16px;\n height: 56px;\n\n &::placeholder {\n ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.small {\n ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n padding: 12px 16px;\n height: 48px;\n\n &::placeholder {\n ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n &.medium {\n ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n height: 56px;\n padding: 16px;\n\n &::placeholder {\n ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n }\n }\n\n .dropdown-arrow {\n pointer-events: none;\n width: 24px;\n height: 24px;\n color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\n }\n\n &:focus {\n outline: 3px solid #ddd;\n }\n\n &:focus-within,\n &.focus-visible-within {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n\n &:hover:not(.action-within) {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n\n input {\n ::placeholder {\n color: ${COLORS.primary_600};\n }\n }\n\n .dropdown-arrow {\n color: ${COLORS.primary_600};\n }\n\n cursor: pointer;\n }\n\n &:active:not(.action-within) {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n\n input {\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n\n .dropdown-arrow {\n color: ${COLORS.primary_800};\n }\n }\n\n &.button {\n ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n box-sizing: border-box;\n height: 32px;\n padding: 0 8px;\n width: initial;\n min-width: initial;\n border: none !important;\n box-shadow: none;\n border-radius: 4px;\n\n &.expanded {\n color: ${COLORS.neutral_800};\n background: ${COLORS.neutral_20};\n }\n }\n\n\n ${(props) => (props.disabled ? disabledState : '')}\n ${(props) => (props.readOnly ? lockedState : '')}\n ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n ${CommonInteractionStyling};\n\n &.focus-visible,\n &.focus-visible-within {\n z-index: ${Z_INDEXES.dropdown + 1} !important;\n ${focusStyles}\n }\n`;\n\nexport const DropdownContentButtonStyling = css`\n min-width: 344px;\n`;\n\n\n\nexport const DropdownButtonTextContent = styled.div`\n display: flex;\n gap: 4px;\n align-items: center;\n box-sizing: border-box;\n min-width: 64px;\n min-height: 32px;\n padding: 4px 8px;\n border-radius: 4px;\n`;\n\nexport const DropdownButtonTextIcon = styled.div`\n width: 24px;\n height: 24px;\n`;\n\nexport const DropdownButtonTextArrow = styled.div`\n width: 24px;\n height: 24px;\n\n svg {\n pointer-events: none;\n }\n`;\n\nexport const DropdownButtonTextStyles = styled.div`\n flex: 1\n`;\n\nexport const DropdownButtonTextWrapper = styled.div`\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n align-items: center;\n width: fit-content;\n cursor: pointer;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n\n .expanded {\n color: ${COLORS.neutral_800};\n\n ${DropdownButtonTextContent} {\n background: ${COLORS.neutral_20};\n }\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:hover:not(.disabled) {\n ${DropdownButtonTextContent} {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n }\n\n &:active:not(.disabled) {\n ${DropdownButtonTextContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n color: ${COLORS.neutral_300};\n }\n\n}`;\n"],"mappings":"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"}
package/dist/InputFields/styling.cjs CHANGED
@@ -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;
package/dist/InputFields/styling.cjs.map CHANGED
@@ -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":"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"}
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":";;;;;;;;;;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,kpDAelC,UAACd,KAAK;EAAA,OACNA,KAAK,CAACe,aAAa,oJAK8BR,cAAM,CAACS,WAAW,6DACxBT,cAAM,CAACS,WAAW,wDACvBT,cAAM,CAACS,WAAW,MAAG;AAAA,GAGhD,UAAAhB,KAAK;EAAA;EAAA,OAAI,EAAE,6BAAIA,KAAK,CAACiB,iBAAiB,yEAAI,CAAC,CAAC;AAAA,GAUrD,IAAAC,6BAAiB,EAACC,8BAAkB,CAACC,MAAM,EAAEb,cAAM,CAACc,WAAW,CAAC,EAGlEC,mBAAW,CAACC,MAAM,EAOd,IAAAC,6BAAiB,EAACL,8BAAkB,CAACC,MAAM,EAAEb,cAAM,CAACc,WAAW,CAAC,EAmB7Dd,cAAM,CAACkB,KAAK,EAEnB,UAACzB,KAAK;EAAA,OAAMA,KAAK,CAAC0B,kBAAkB,GAAGf,uBAAuB,GAAG,EAAE;AAAA,CAAC,EAGlE,UAACX,KAAK;EAAA,OAAMA,KAAK,CAAC2B,sBAAsB,GAAG,EAAE,GAAGtB,aAAa;AAAA,CAAC,EAI5CE,cAAM,CAACC,WAAW,EAK7BD,cAAM,CAACE,WAAW,EAGSF,cAAM,CAACqB,WAAW,EAIpDC,mBAAW,EAIiBtB,cAAM,CAACK,YAAY,EAGnBL,cAAM,CAACuB,WAAW,EAQZvB,cAAM,CAACwB,WAAW,EAIlBxB,cAAM,CAACqB,WAAW,CAUzD;AAAC;AAEF,IAAMI,iBAAiB,OAAG1B,qBAAG,sUAEvB,IAAA2B,+BAAmB,EAACd,8BAAkB,CAACe,OAAO,EAAE3B,cAAM,CAACkB,KAAK,CAAC,EAS7D,IAAAQ,+BAAmB,EAACd,8BAAkB,CAACe,OAAO,EAAE,SAAS,CAAC,CAI/D;AAAC;AAEK,IAAMC,OAAO,GAAGrC,yBAAM,CAACC,GAAG,8kBAI7B,IAAAkC,+BAAmB,EAACd,8BAAkB,CAACe,OAAO,EAAE,IAAI,CAAC,EAOrDZ,mBAAW,CAACC,MAAM,EAChB,IAAAa,8BAAkB,EAACjB,8BAAkB,CAACe,OAAO,EAAE,IAAI,CAAC,EAQpD,IAAAD,+BAAmB,EAACd,8BAAkB,CAACe,OAAO,EAAE,IAAI,CAAC,EAOrD,IAAAE,8BAAkB,EAACjB,8BAAkB,CAACe,OAAO,EAAE,IAAI,CAAC,CAezD;AAAC;AACK,IAAMG,YAAY,GAAG,IAAAvC,yBAAM,EAACqC,OAAO,CAAC,wGAChC5B,cAAM,CAAC+B,YAAY,CAC7B;AAAC;AAEF,IAAMC,WAAW,mEACdC,aAAM,CAACC,OAAO,EAAGlC,cAAM,CAACc,WAAW,+CACnCmB,aAAM,CAACE,KAAK,EAAGnC,cAAM,CAACuB,WAAW,+CACjCU,aAAM,CAACG,OAAO,EAAGpC,cAAM,CAAC+B,YAAY,gBACtC;AAEM,IAAMM,iBAAiB,GAAG,IAAA9C,yBAAM,EAACqC,OAAO,CAAC,wGACrC,UAACnC,KAAK;EAAA,OAAKuC,WAAW,CAACvC,KAAK,CAAC6C,IAAI,CAAC;AAAA,EAC5C;AAAC;AAEK,IAAMC,WAAW,GAAG,IAAAhD,yBAAM,EAACqC,OAAO,CAAC,wGAC/B5B,cAAM,CAACc,WAAW,CAC5B;AAAC;AACK,IAAM0B,iBAAiB,GAAG,IAAAjD,yBAAM,EAACqC,OAAO,CAAC,0GACrC5B,cAAM,CAACG,WAAW,CAC5B;AAAC;AAIK,IAAMsC,UAAU,GAAGlD,yBAAM,CAACC,GAAG,gHAEnC;AAAC;AAEK,IAAMkD,iBAAiB,GAAG,IAAAnD,yBAAM,EAACkD,UAAU,CAAC,uIAGlD;AAAC"}
package/dist/InputFields/styling.js CHANGED
@@ -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;
package/dist/InputFields/styling.js.map CHANGED
@@ -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,+mDAelC,UAACX,KAAK;EAAA,OACNA,KAAK,CAACY,aAAa,oJAK8BtB,MAAM,CAACuB,WAAW,6DACxBvB,MAAM,CAACuB,WAAW,wDACvBvB,MAAM,CAACuB,WAAW,MAAG;AAAA,GAGhD,UAAAb,KAAK;EAAA;EAAA,OAAI,EAAE,6BAAIA,KAAK,CAACc,iBAAiB,yEAAI,CAAC,CAAC;AAAA,GASrDpB,iBAAiB,CAACD,kBAAkB,CAACsB,MAAM,EAAEzB,MAAM,CAAC0B,WAAW,CAAC,EAGlE3B,WAAW,CAAC4B,MAAM,EAOdtB,iBAAiB,CAACF,kBAAkB,CAACsB,MAAM,EAAEzB,MAAM,CAAC0B,WAAW,CAAC,EAmB7D1B,MAAM,CAAC4B,KAAK,EAEnB,UAAClB,KAAK;EAAA,OAAMA,KAAK,CAACmB,kBAAkB,GAAGX,uBAAuB,GAAG,EAAE;AAAA,CAAC,EAGlE,UAACR,KAAK;EAAA,OAAMA,KAAK,CAACoB,sBAAsB,GAAG,EAAE,GAAGhB,aAAa;AAAA,CAAC,EAI5Cd,MAAM,CAACe,WAAW,EAK7Bf,MAAM,CAACgB,WAAW,EAGShB,MAAM,CAAC+B,WAAW,EAIpD9B,WAAW,EAIiBD,MAAM,CAACmB,YAAY,EAGnBnB,MAAM,CAACgC,WAAW,EAQZhC,MAAM,CAACiC,WAAW,EAIlBjC,MAAM,CAAC+B,WAAW,CAUzD;AAED,IAAMG,iBAAiB,GAAGpC,GAAG,uTAEvBI,mBAAmB,CAACC,kBAAkB,CAACgC,OAAO,EAAEnC,MAAM,CAAC4B,KAAK,CAAC,EAS7D1B,mBAAmB,CAACC,kBAAkB,CAACgC,OAAO,EAAE,SAAS,CAAC,CAI/D;AAED,OAAO,IAAMC,OAAO,GAAGvC,MAAM,CAACY,GAAG,gkBAI7BP,mBAAmB,CAACC,kBAAkB,CAACgC,OAAO,EAAE,IAAI,CAAC,EAOrDpC,WAAW,CAAC4B,MAAM,EAChBrB,kBAAkB,CAACH,kBAAkB,CAACgC,OAAO,EAAE,IAAI,CAAC,EAQpDjC,mBAAmB,CAACC,kBAAkB,CAACgC,OAAO,EAAE,IAAI,CAAC,EAOrD7B,kBAAkB,CAACH,kBAAkB,CAACgC,OAAO,EAAE,IAAI,CAAC,CAezD;AACD,OAAO,IAAME,YAAY,GAAGxC,MAAM,CAACuC,OAAO,CAAC,0FAChCpC,MAAM,CAACsC,YAAY,CAC7B;AAED,IAAMC,WAAW,qDACdhC,MAAM,CAACiC,OAAO,EAAGxC,MAAM,CAAC0B,WAAW,iCACnCnB,MAAM,CAACkC,KAAK,EAAGzC,MAAM,CAACgC,WAAW,iCACjCzB,MAAM,CAACmC,OAAO,EAAG1C,MAAM,CAACsC,YAAY,gBACtC;AAED,OAAO,IAAMK,iBAAiB,GAAG9C,MAAM,CAACuC,OAAO,CAAC,0FACrC,UAAC1B,KAAK;EAAA,OAAK6B,WAAW,CAAC7B,KAAK,CAACkC,IAAI,CAAC;AAAA,EAC5C;AAED,OAAO,IAAMC,WAAW,GAAGhD,MAAM,CAACuC,OAAO,CAAC,0FAC/BpC,MAAM,CAAC0B,WAAW,CAC5B;AACD,OAAO,IAAMoB,iBAAiB,GAAGjD,MAAM,CAACuC,OAAO,CAAC,4FACrCpC,MAAM,CAACiB,WAAW,CAC5B;AAED,SAASiB,iBAAiB,EAAEd,iBAAiB;AAE7C,OAAO,IAAM2B,UAAU,GAAGlD,MAAM,CAACY,GAAG,kGAEnC;AAED,OAAO,IAAMuC,iBAAiB,GAAGnD,MAAM,CAACkD,UAAU,CAAC,yHAGlD"}
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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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "3.4.0",
3
+ "version": "3.4.2",
4
4
  "private": false,
5
5
  "author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
6
6
  "contributors": [],