@laerdal/life-react-components 1.4.1-dev.2 → 1.4.1-dev.3

package/dist/esm/InputFields/components/SearchField.js

@@ -0,0 +1,111 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';
+import { activeValidationMessageState, tabbedHereStyle } from '../styling';
+import { ComponentMStyling, ComponentSStyling } from '../../styles/typography';
+const DisabledState = css`
+  border: 1px solid ${COLORS.neutral_100};
+  pointer-events: none;
+  background-color: transparent !important;
+  box-shadow: none !important;
+`;
+export const StyledSearchField = styled.div`
+  display: flex;
+  flex-direction: row;
+  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};
+  box-sizing: border-box;
+  border-radius: 56px;
+  align-items: center;
+  position: relative;
+  height: 48px;
+  appearance: none;
+  background-color: ${COLORS.white};
+
+  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}
+
+  padding: 0 !important;
+  width: 100%;
+  ::placeholder {
+    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}
+  }
+  ${BREAKPOINTS.MEDIUM} {
+    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
+
+    height: 56px;
+    padding: 0 4px !important;
+    &::placeholder {
+      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}
+    }
+  }
+  &.small {
+    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}
+    height: 48px;
+    padding: 0 !important;
+    &::placeholder {
+      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}
+    }
+  }
+  &.medium {
+    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
+    height: 56px;
+    &::placeholder {
+      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}
+    }
+  }
+  &:hover {
+    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};
+    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};
+    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};
+    border-color: transparent;
+  }
+  &:focus-within {
+    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};
+    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};
+    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};
+    border-color: transparent;
+  }
+  &:disabled {
+    border: 1px solid ${COLORS.neutral_100};
+    pointer-events: none;
+    background-color: transparent !important;
+  }
+  div {
+    color: ${COLORS.neutral_600};
+    background-color: transparent;
+  }
+  ${props => props.disabled ? DisabledState : ''}
+  ${props => props.activeValidationMessage ? activeValidationMessageState : ''}
+  ${props => props.tabbedHere ? tabbedHereStyle : ''}
+`;
+
+const SearchField = ({
+  id,
+  searchTerm,
+  disabled,
+  validationMessage,
+  children,
+  tabbedHere,
+  size
+}) => {
+  return /*#__PURE__*/React.createElement(StyledSearchField, {
+    id: `${id}_main`,
+    className: (searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : ''),
+    disabled: disabled,
+    tabbedHere: tabbedHere,
+    tabIndex: -1,
+    activeValidationMessage: validationMessage !== undefined && validationMessage !== ''
+  }, children);
+};
+
+SearchField.propTypes = {
+  id: _pt.string.isRequired,
+  searchTerm: _pt.string,
+  disabled: _pt.bool,
+  validationMessage: _pt.string,
+  children: _pt.any.isRequired,
+  tabbedHere: _pt.bool.isRequired,
+  size: _pt.string.isRequired
+};
+export default SearchField;
+//# sourceMappingURL=SearchField.js.map

package/dist/esm/InputFields/components/SearchField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/InputFields/components/SearchField.tsx"],"names":["React","styled","css","BREAKPOINTS","COLORS","ComponentTextStyle","activeValidationMessageState","tabbedHereStyle","ComponentMStyling","ComponentSStyling","DisabledState","neutral_100","StyledSearchField","div","neutral_400","white","Regular","black","Italic","neutral_500","MEDIUM","primary_700","primary_800","neutral_600","props","disabled","activeValidationMessage","tabbedHere","SearchField","id","searchTerm","validationMessage","children","size","concat","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles/index';\nimport {activeValidationMessageState, tabbedHereStyle} from '../styling';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles/typography';\n\nconst DisabledState = css`\n  border: 1px solid ${COLORS.neutral_100};\n  pointer-events: none;\n  background-color: transparent !important;\n  box-shadow: none !important;\n`;\n\nexport const StyledSearchField = styled.div<{ disabled?: boolean; activeValidationMessage?: boolean; tabbedHere?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ${COLORS.white};\n\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  padding: 0 !important;\n  width: 100%;\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    height: 56px;\n    padding: 0 4px !important;\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 48px;\n    padding: 0 !important;\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 56px;\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    border-color: transparent;\n  }\n  &:focus-within {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    border-color: transparent;\n  }\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n  div {\n    color: ${COLORS.neutral_600};\n    background-color: transparent;\n  }\n  ${(props) => (props.disabled ? DisabledState : '')}\n  ${(props) => (props.activeValidationMessage ? activeValidationMessageState : '')}\n  ${(props) => (props.tabbedHere ? tabbedHereStyle : '')}\n`;\n\ntype SeachFieldProps = {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  tabbedHere: boolean;\n  size: string;\n};\n\nconst SearchField: React.FunctionComponent<SeachFieldProps> = ({ id, searchTerm, disabled, validationMessage, children, tabbedHere, size }) => {\n  return (\n    <StyledSearchField\n      id={`${id}_main`}\n      className={(searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '')}\n      disabled={disabled}\n      tabbedHere={tabbedHere}\n      tabIndex={-1}\n      activeValidationMessage={validationMessage !== undefined && validationMessage !== ''}>\n      {children}\n    </StyledSearchField>\n  );\n};\n\nexport default SearchField;\n"],"file":"SearchField.js"}

package/dist/esm/InputFields/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/InputFields/index.ts"],"names":["TextField","PasswordField","Checkbox","RadioButton","SearchBar","InputLabel","DatepickerField","Textarea","QuickSearch"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,aAAtB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,SAAP,MAAsB,aAAtB;AACA,OAAOC,UAAP,MAAuB,SAAvB;AACA,OAAOC,eAAP,MAA4B,mBAA5B;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AAEA,SAASR,SAAT,EAAoBC,aAApB,EAAmCC,QAAnC,EAA6CC,WAA7C,EAA0DC,SAA1D,EAAqEC,UAArE,EAAiFC,eAAjF,EAAkGC,QAAlG,EAA4GC,WAA5G","sourcesContent":["import TextField from './TextField';\nimport PasswordField from './PasswordField';\nimport Checkbox from './Checkbox';\nimport RadioButton from './RadioButton';\nimport SearchBar from './SearchBar';\nimport InputLabel from './Label';\nimport DatepickerField from './DatepickerField';\nimport Textarea from './Textarea';\nimport QuickSearch from './QuickSearch';\n\nexport { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch };\n"],"file":"index.js"}

package/dist/esm/InputFields/styling.js

@@ -0,0 +1,213 @@
+import styled, { css } from 'styled-components';
+import { BREAKPOINTS, COLORS } from '../styles';
+import { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling } from '../styles/typography';
+export const InputWrapper = styled.div`
+  outline: none;
+  ${props => props.locked || props.disabled ? 'cursor: not-allowed;' : ''};
+  ${props => props.margin ? `margin: ${props.margin};` : ''}
+`;
+const lockedState = css`
+  background-color: ${COLORS.neutral_100};
+  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300} !important;
+  color: ${COLORS.neutral_600} !important;
+  pointer-events: none;
+  outline: none;
+  cursor: not-allowed;
+`;
+export const activeValidationMessageState = css`
+  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};
+  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};
+  box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};
+`;
+const activeErrorMessageState = css`
+  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};
+  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};
+  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};
+`;
+const activeCorrectInput = css`
+  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};
+  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};
+  box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};
+`;
+export const tabbedHereStyle = css`
+  outline: none;
+  box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1 !important;
+`;
+const InputFieldStyling = styled.input`
+  height: 48px;
+  width: 100%;
+  border-radius: 4px;
+
+  border: 0;
+  -webkit-appearance: none;
+  ${props => props.withoutBorder ? `-webkit-box-shadow: none;
+      -moz-box-shadow: none;
+      box-shadow: none;
+      ` : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};
+      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};
+      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}
+  background-color: #fff;
+  box-sizing: border-box;
+  padding: 0 16px !important;
+
+  box-sizing: border-box;
+  width: 100%;
+  outline: none;
+  border-radius: 4px;
+
+  font-size: 16px;
+
+  &::placeholder {
+    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
+  }
+
+  ${BREAKPOINTS.MEDIUM} {
+    font-size: 18px;
+    line-height: 18px;
+    height: 56px;
+    padding: 0 16px !important;
+
+    &::placeholder {
+      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
+    }
+  }
+
+  &.small {
+    font-size: 16px;
+    height: 48px;
+    &::placeholder {
+      font-size: 16px;
+    }
+  }
+  &.medium {
+    font-size: 18px;
+    height: 56px;
+    &::placeholder {
+      font-size: 18px;
+    }
+  }
+
+  color: ${COLORS.black} !important;
+
+  ${props => props.locked ? lockedState : ''}
+  ${props => props.activeValidationMessage ? activeValidationMessageState : ''}
+  ${props => props.activeErrorMessage ? activeErrorMessageState : ''}
+  ${props => props.correctInput ? activeCorrectInput : ''}
+  ${props => props.tabbedHere ? tabbedHereStyle : ''}
+
+  &:disabled {
+    border: 1px solid ${COLORS.neutral_100};
+    pointer-events: none;
+    box-shadow: none !important;
+    outline: none;
+    cursor: not-allowed;
+    color: ${COLORS.neutral_300} !important;
+  }
+  &:focus {
+    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};
+    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};
+    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};
+  }
+
+  &.error {
+    border-radius: 4px;
+    border-style: solid;
+    border-width: 2px;
+    border-color: #e97116;
+    padding: 0 15px !important;
+  }
+
+  &:not(.placeholder) {
+    line-height: 40px;
+  }
+
+  &.error {
+    margin-bottom: 0 !important;
+  }
+
+  &:hover {
+    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};
+    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};
+    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};
+  }
+
+  &.active {
+    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};
+    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};
+    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};
+  }
+
+  &.show-checkmark.valid {
+    background-image: none;
+  }
+
+  &.show-checkmark.pending {
+    background-image: none;
+  }
+`;
+const ValidationStyling = css`
+  &.error-msg {
+    ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}
+    text-align: center;
+    font-weight: 400;
+    box-sizing: border-box;
+  }
+
+  &.error-msg {
+    padding-top: 8px;
+    padding-bottom: 0;
+    ${ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468')}
+    font-weight: 700;
+    line-height: 15px;
+  }
+`;
+export const RequiredStar = styled.span`
+  color: ${COLORS.critical_500};
+  font-size: 28px;
+  line-height: 12px;
+  font-weight: 700;
+  position: relative;
+  top: 10px;
+`;
+export const Warning = styled.div`
+  font-size: 12px;
+  line-height: 140%;
+
+  ${BREAKPOINTS.MEDIUM} {
+    font-size: 14px;
+  }
+
+  &.small {
+    font-size: 12px;
+  }
+  &.medium {
+    font-size: 14px;
+  }
+
+  & * {
+    vertical-align: middle;
+    display: inline-block;
+  }
+
+  svg {
+    margin-right: 4px;
+  }
+`;
+export const WarningMessage = styled(Warning)`
+  color: ${COLORS.warning_500};
+`;
+export const ErrorMessage = styled(Warning)`
+  color: ${COLORS.critical_500};
+`;
+export const AutofilledMessage = styled(Warning)`
+  color: ${COLORS.neutral_600};
+`;
+export { ValidationStyling, InputFieldStyling };
+export const StyledIcon = styled.div`
+  border-radius: 50%;
+`;
+export const SearchIconWrapper = styled(StyledIcon)`
+  position: absolute;
+  border-radius: 50%;
+`;
+//# sourceMappingURL=styling.js.map

package/dist/esm/InputFields/styling.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/InputFields/styling.ts"],"names":["styled","css","BREAKPOINTS","COLORS","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","InputWrapper","div","props","locked","disabled","margin","lockedState","neutral_100","neutral_300","neutral_600","activeValidationMessageState","warning_400","activeErrorMessageState","critical_400","activeCorrectInput","correct_500","tabbedHereStyle","InputFieldStyling","input","withoutBorder","neutral_400","Italic","MEDIUM","black","activeValidationMessage","activeErrorMessage","correctInput","tabbedHere","primary_800","primary_700","ValidationStyling","Regular","RequiredStar","span","critical_500","Warning","WarningMessage","warning_500","ErrorMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling } from '../styles/typography';\n\nexport const InputWrapper = styled.div<{ locked?: boolean; disabled?: boolean; margin?: string }>`\n  outline: none;\n  ${(props) => (props.locked || props.disabled ? 'cursor: not-allowed;' : '')};\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 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 activeValidationMessageState = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_400};\n`;\nconst activeErrorMessageState = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\nconst activeCorrectInput = css`\n  -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n  -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_500};\n`;\nexport const tabbedHereStyle = css`\n  outline: none;\n  box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1 !important;\n`;\n\nconst InputFieldStyling = styled.input<{\n  locked?: boolean;\n  activeValidationMessage?: boolean;\n  activeErrorMessage?: boolean;\n  correctInput?: boolean;\n  active?: boolean;\n  tabbedHere?: boolean;\n  withoutBorder?: boolean;\n  size?: string;\n}>`\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ${(props) =>\n    props.withoutBorder\n      ? `-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      `\n      : `-webkit-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      -moz-box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n      box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};`}\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  box-sizing: border-box;\n  width: 100%;\n  outline: none;\n  border-radius: 4px;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ${COLORS.black} !important;\n\n  ${(props) => (props.locked ? lockedState : '')}\n  ${(props) => (props.activeValidationMessage ? activeValidationMessageState : '')}\n  ${(props) => (props.activeErrorMessage ? activeErrorMessageState : '')}\n  ${(props) => (props.correctInput ? activeCorrectInput : '')}\n  ${(props) => (props.tabbedHere ? tabbedHereStyle : '')}\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 {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &.error {\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 2px;\n    border-color: #e97116;\n    padding: 0 15px !important;\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.error {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n\n  &.active {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\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 RequiredStar = styled.span`\n  color: ${COLORS.critical_500};\n  font-size: 28px;\n  line-height: 12px;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n`;\nexport const Warning = styled.div`\n  font-size: 12px;\n  line-height: 140%;\n\n  ${BREAKPOINTS.MEDIUM} {\n    font-size: 14px;\n  }\n\n  &.small {\n    font-size: 12px;\n  }\n  &.medium {\n    font-size: 14px;\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nexport const WarningMessage = styled(Warning)`\n  color: ${COLORS.warning_500};\n`;\nexport const ErrorMessage = styled(Warning)`\n  color: ${COLORS.critical_500};\n`;\nexport const AutofilledMessage = styled(Warning)`\n  color: ${COLORS.neutral_600};\n`;\n\nexport { ValidationStyling, InputFieldStyling };\n\nexport const StyledIcon = styled.div`\n  border-radius: 50%;\n`;\n\nexport const SearchIconWrapper = styled(StyledIcon)`\n  position: absolute;\n  border-radius: 50%;\n`;\n"],"file":"styling.js"}

package/dist/esm/Layouts/index.js

@@ -0,0 +1,91 @@
+import styled from 'styled-components';
+import { BREAKPOINTS } from '../styles';
+const GRID = {
+  GAP: {
+    SMALL: '24px',
+    MEDIUM: '32px',
+    LARGE: '40px'
+  },
+  GUTTER: {
+    SMALL: '16px',
+    MEDIUM: '32px',
+    LARGE: '56px'
+  }
+};
+export const PageWidth = styled.div`
+  display: block;
+  margin: 0 ${GRID.GUTTER.SMALL};
+
+  ${BREAKPOINTS.MEDIUM} {
+    margin: 0 ${GRID.GUTTER.MEDIUM};
+  }
+  ${BREAKPOINTS.LARGE} {
+    margin: 0 ${GRID.GUTTER.LARGE};
+  }
+
+  ${BREAKPOINTS.XLARGE} {
+    max-width: ${props => props.useMaxWidth ? props.maxWidth ? 'min(100% - 112px,' + props.maxWidth + 'px)' : 'calc(100% - 112px)' : '1088px'};
+    margin: 0 auto;
+  }
+`;
+export const Columns = styled.section`
+  width: 100%;
+  display: grid;
+  grid-gap: ${props => props.gap || GRID.GAP.SMALL};
+  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */
+
+  ${BREAKPOINTS.MEDIUM} {
+    grid-template-columns: ${props => props.columns};
+    -ms-grid-columns: ${props => props.columns};
+    grid-gap: ${props => props.gap || GRID.GAP.MEDIUM};
+  }
+
+  ${BREAKPOINTS.LARGE} {
+    grid-gap: ${props => props.gap || GRID.GAP.LARGE};
+  }
+
+  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    display: -ms-grid;
+
+    > *:not(:first-child) {
+      margin-left: ${GRID.GAP.MEDIUM};
+    }
+  }
+
+  @media print {
+    grid-gap: 0;
+    grid-template-columns: ${props => props.printColumns || 'none'};
+  }
+`;
+export const ContainerMargins = styled.div`
+  /* X small devices (mobile phones, 320px and up) */
+  @media only screen and (min-width: 320px) {
+    margin: 16px;
+    column-gap: 16px;
+  }
+
+  /* Small devices (portrait tablets, 576px and up) */
+  @media only screen and (min-width: 576px) {
+    margin: 16px;
+    column-gap: 16px;
+  }
+
+  /* Medium devices (landscape tablets, 768px and up) */
+  @media only screen and (min-width: 768px) {
+    margin: 32px;
+    column-gap: 32px;
+  }
+
+  /* Large devices (laptops/desktops, 992px and up) */
+  @media only screen and (min-width: 992px) {
+    margin: 56px;
+    column-gap: 24px;
+  }
+
+  /* X large devices (laptops/desktops, 1200px and up) */
+  @media only screen and (min-width: 1200px) {
+    margin: 56px;
+    column-gap: 40px;
+  }
+`;
+//# sourceMappingURL=index.js.map

package/dist/esm/Layouts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Layouts/index.ts"],"names":["styled","BREAKPOINTS","GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","div","XLARGE","props","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns","ContainerMargins"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA,SAASC,WAAT,QAA4B,WAA5B;AAEA,MAAMC,IAAI,GAAG;AACXC,EAAAA,GAAG,EAAE;AACHC,IAAAA,KAAK,EAAE,MADJ;AAEHC,IAAAA,MAAM,EAAE,MAFL;AAGHC,IAAAA,KAAK,EAAE;AAHJ,GADM;AAMXC,EAAAA,MAAM,EAAE;AACNH,IAAAA,KAAK,EAAE,MADD;AAENC,IAAAA,MAAM,EAAE,MAFF;AAGNC,IAAAA,KAAK,EAAE;AAHD;AANG,CAAb;AAaA,OAAO,MAAME,SAAS,GAAGR,MAAM,CAACS,GAAkD;AAClF;AACA,cAAcP,IAAI,CAACK,MAAL,CAAYH,KAAM;AAChC;AACA,IAAIH,WAAW,CAACI,MAAO;AACvB,gBAAgBH,IAAI,CAACK,MAAL,CAAYF,MAAO;AACnC;AACA,IAAIJ,WAAW,CAACK,KAAM;AACtB,gBAAgBJ,IAAI,CAACK,MAAL,CAAYD,KAAM;AAClC;AACA;AACA,IAAIL,WAAW,CAACS,MAAO;AACvB,iBAAkBC,KAAD,IAAYA,KAAK,CAACC,WAAN,GAAqBD,KAAK,CAACE,QAAN,GAAiB,sBAAsBF,KAAK,CAACE,QAA5B,GAAuC,KAAxD,GAAgE,oBAArF,GAA6G,QAAU;AACpJ;AACA;AACA,CAfO;AAiBP,OAAO,MAAMC,OAAO,GAAGd,MAAM,CAACe,OAAmE;AACjG;AACA;AACA,cAAeJ,KAAD,IAAWA,KAAK,CAACK,GAAN,IAAad,IAAI,CAACC,GAAL,CAASC,KAAM;AACrD;AACA;AACA,IAAIH,WAAW,CAACI,MAAO;AACvB,6BAA8BM,KAAD,IAAWA,KAAK,CAACM,OAAQ;AACtD,wBAAyBN,KAAD,IAAWA,KAAK,CAACM,OAAQ;AACjD,gBAAiBN,KAAD,IAAWA,KAAK,CAACK,GAAN,IAAad,IAAI,CAACC,GAAL,CAASE,MAAO;AACxD;AACA;AACA,IAAIJ,WAAW,CAACK,KAAM;AACtB,gBAAiBK,KAAD,IAAWA,KAAK,CAACK,GAAN,IAAad,IAAI,CAACC,GAAL,CAASG,KAAM;AACvD;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqBJ,IAAI,CAACC,GAAL,CAASE,MAAO;AACrC;AACA;AACA;AACA;AACA;AACA,6BAA8BM,KAAD,IAAWA,KAAK,CAACO,YAAN,IAAsB,MAAO;AACrE;AACA,CA5BO;AA8BP,OAAO,MAAMC,gBAAgB,GAAGnB,MAAM,CAACS,GAAI;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CA9BO","sourcesContent":["import styled from 'styled-components';\n\nimport { BREAKPOINTS } from '../styles';\n\nconst GRID = {\n  GAP: {\n    SMALL: '24px',\n    MEDIUM: '32px',\n    LARGE: '40px',\n  },\n  GUTTER: {\n    SMALL: '16px',\n    MEDIUM: '32px',\n    LARGE: '56px',\n  },\n};\n\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number }>`\n  display: block;\n  margin: 0 ${GRID.GUTTER.SMALL};\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 ${GRID.GUTTER.MEDIUM};\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 ${GRID.GUTTER.LARGE};\n  }\n\n  ${BREAKPOINTS.XLARGE} {\n    max-width: ${(props) => (props.useMaxWidth ? (props.maxWidth ? 'min(100% - 112px,' + props.maxWidth + 'px)' : 'calc(100% - 112px)') : '1088px')};\n    margin: 0 auto;\n  }\n`;\n\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\n  width: 100%;\n  display: grid;\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\n\n  ${BREAKPOINTS.MEDIUM} {\n    grid-template-columns: ${(props) => props.columns};\n    -ms-grid-columns: ${(props) => props.columns};\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ${GRID.GAP.MEDIUM};\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\n  }\n`;\n\nexport const ContainerMargins = styled.div`\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Small devices (portrait tablets, 576px and up) */\n  @media only screen and (min-width: 576px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* Large devices (laptops/desktops, 992px and up) */\n  @media only screen and (min-width: 992px) {\n    margin: 56px;\n    column-gap: 24px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n`;\n"],"file":"index.js"}