@laerdal/life-react-components 1.4.0 → 1.4.1-dev.11

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

@@ -1,110 +1,43 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
+
+var _templateObject, _templateObject2;
+
 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`,
+import { activeValidationMessageState } from '../styling';
+import { ComponentMStyling, ComponentSStyling } from '../../styles';
+import { Z_INDEXES } from '../../styles/z-indexes';
+import { jsx as _jsx } from "react/jsx-runtime";
+var DisabledState = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  pointer-events: none;\n  background-color: transparent !important;\n  box-shadow: none !important;\n"])), COLORS.neutral_100);
+export var StyledSearchField = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0px 0px 0px 1px ", ";\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: ", ";\n\n  ", "\n\n  padding: 0 !important;\n  width: 100%;\n\n  ::placeholder {\n    ", "\n  }\n\n  ", " {\n    ", "\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    ", "\n    height: 56px;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    border-color: transparent;\n  }\n\n  &.focus-visible-within{\n    outline: none;\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    z-index: ", ";\n  }\n  \n  &:focus-within {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    border-color: transparent;\n  }\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n\n  div {\n    color: ", ";\n    background-color: transparent;\n  }\n\n  ", "\n  ", "\n"])), COLORS.neutral_400, COLORS.white, ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), COLORS.primary_700, Z_INDEXES.focus, COLORS.primary_800, COLORS.neutral_100, COLORS.neutral_600, function (props) {
+  return props.disabled ? DisabledState : '';
+}, function (props) {
+  return props.activeValidationMessage ? activeValidationMessageState : '';
+});
+var SearchField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var id = _ref.id,
+      searchTerm = _ref.searchTerm,
+      disabled = _ref.disabled,
+      validationMessage = _ref.validationMessage,
+      children = _ref.children,
+      size = _ref.size;
+  return /*#__PURE__*/_jsx(StyledSearchField, {
+    id: "".concat(id, "_main"),
+    ref: ref,
     className: (searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : ''),
     disabled: disabled,
-    tabbedHere: tabbedHere,
-    tabIndex: -1,
-    activeValidationMessage: validationMessage !== undefined && validationMessage !== ''
-  }, children);
-};
-
+    activeValidationMessage: validationMessage !== undefined && validationMessage !== '',
+    children: 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;

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

@@ -1 +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"}
+{"version":3,"sources":["../../../../src/InputFields/components/SearchField.tsx"],"names":["React","styled","css","BREAKPOINTS","COLORS","ComponentTextStyle","activeValidationMessageState","ComponentMStyling","ComponentSStyling","Z_INDEXES","DisabledState","neutral_100","StyledSearchField","div","neutral_400","white","Regular","black","Italic","neutral_500","MEDIUM","primary_700","focus","primary_800","neutral_600","props","disabled","activeValidationMessage","SearchField","forwardRef","ref","id","searchTerm","validationMessage","children","size","concat","undefined"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,IAAgBC,GAAhB,QAA0B,mBAA1B;AACA,SAAQC,WAAR,EAAqBC,MAArB,EAA6BC,kBAA7B,QAAsD,oBAAtD;AACA,SAAQC,4BAAR,QAA2C,YAA3C;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,QAAmD,cAAnD;AACA,SAAQC,SAAR,QAAwB,wBAAxB;;AAEA,IAAMC,aAAa,GAAGR,GAAH,yMACGE,MAAM,CAACO,WADV,CAAnB;AAOA,OAAO,IAAMC,iBAAiB,GAAGX,MAAM,CAACY,GAAV,oyCAGQT,MAAM,CAACU,WAHf,EAURV,MAAM,CAACW,KAVC,EAY1BP,iBAAiB,CAACH,kBAAkB,CAACW,OAApB,EAA6BZ,MAAM,CAACa,KAApC,CAZS,EAkBxBT,iBAAiB,CAACH,kBAAkB,CAACa,MAApB,EAA4Bd,MAAM,CAACe,WAAnC,CAlBO,EAqB1BhB,WAAW,CAACiB,MArBc,EAsBxBb,iBAAiB,CAACF,kBAAkB,CAACW,OAApB,EAA6BZ,MAAM,CAACa,KAApC,CAtBO,EA4BtBV,iBAAiB,CAACF,kBAAkB,CAACa,MAApB,EAA4Bd,MAAM,CAACe,WAAnC,CA5BK,EAiCxBX,iBAAiB,CAACH,kBAAkB,CAACW,OAApB,EAA6BZ,MAAM,CAACa,KAApC,CAjCO,EAsCtBT,iBAAiB,CAACH,kBAAkB,CAACa,MAApB,EAA4Bd,MAAM,CAACe,WAAnC,CAtCK,EA2CxBZ,iBAAiB,CAACF,kBAAkB,CAACW,OAApB,EAA6BZ,MAAM,CAACa,KAApC,CA3CO,EA+CtBV,iBAAiB,CAACF,kBAAkB,CAACa,MAApB,EAA4Bd,MAAM,CAACe,WAAnC,CA/CK,EAoDUf,MAAM,CAACiB,WApDjB,EA2DfZ,SAAS,CAACa,KA3DK,EA+DUlB,MAAM,CAACmB,WA/DjB,EAoENnB,MAAM,CAACO,WApED,EA0EjBP,MAAM,CAACoB,WA1EU,EA8E1B,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,QAAN,GAAiBhB,aAAjB,GAAiC,EAA7C;AAAA,CA9E0B,EA+E1B,UAACe,KAAD;AAAA,SAAYA,KAAK,CAACE,uBAAN,GAAgCrB,4BAAhC,GAA+D,EAA3E;AAAA,CA/E0B,CAAvB;AA2FP,IAAMsB,WAAW,gBAAG5B,KAAK,CAAC6B,UAAN,CAAkD,gBAOMC,GAPN,EAOc;AAAA,MANTC,EAMS,QANTA,EAMS;AAAA,MALTC,UAKS,QALTA,UAKS;AAAA,MAJTN,QAIS,QAJTA,QAIS;AAAA,MAHTO,iBAGS,QAHTA,iBAGS;AAAA,MAFTC,QAES,QAFTA,QAES;AAAA,MADTC,IACS,QADTA,IACS;AAClF,sBACE,KAAC,iBAAD;AACE,IAAA,EAAE,YAAKJ,EAAL,UADJ;AAEE,IAAA,GAAG,EAAED,GAFP;AAGE,IAAA,SAAS,EAAE,CAACE,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EAAvC,EAA2CI,MAA3C,CAAkDD,IAAI,GAAGA,IAAH,GAAU,EAAhE,CAHb;AAIE,IAAA,QAAQ,EAAET,QAJZ;AAKE,IAAA,uBAAuB,EAAEO,iBAAiB,KAAKI,SAAtB,IAAmCJ,iBAAiB,KAAK,EALpF;AAAA,cAMGC;AANH,IADF;AAUD,CAlBmB,CAApB;;AAREH,EAAAA,E;AACAC,EAAAA,U;AACAN,EAAAA,Q;AACAO,EAAAA,iB;AACAC,EAAAA,Q;AACAC,EAAAA,I;;AAuBF,eAAeP,WAAf","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles/index';\nimport {activeValidationMessageState} from '../styling';\nimport {ComponentMStyling, ComponentSStyling} from '../../styles';\nimport {Z_INDEXES} from '../../styles/z-indexes';\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; }>`\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\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    height: 56px;\n    padding: 0 4px !important;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 48px;\n    padding: 0 !important;\n\n    &::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n    }\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n    border-color: transparent;\n  }\n\n  &.focus-visible-within{\n    outline: none;\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    z-index: ${Z_INDEXES.focus};\n  }\n  \n  &:focus-within {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    border-color: transparent;\n  }\n\n  &:disabled {\n    border: 1px solid ${COLORS.neutral_100};\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n\n  div {\n    color: ${COLORS.neutral_600};\n    background-color: transparent;\n  }\n\n  ${(props) => (props.disabled ? DisabledState : '')}\n  ${(props) => (props.activeValidationMessage ? activeValidationMessageState : '')}\n`;\n\ntype SeachFieldProps = {\n  id: string;\n  searchTerm?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  children: any;\n  size: string;\n};\n\nconst SearchField = React.forwardRef<HTMLDivElement, SeachFieldProps>(({\n                                                                           id,\n                                                                           searchTerm,\n                                                                           disabled,\n                                                                           validationMessage,\n                                                                           children,\n                                                                           size\n                                                                         }, ref) => {\n  return (\n    <StyledSearchField\n      id={`${id}_main`}\n      ref={ref}\n      className={(searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '')}\n      disabled={disabled}\n      activeValidationMessage={validationMessage !== undefined && validationMessage !== ''}>\n      {children}\n    </StyledSearchField>\n  );\n});\n\nexport default SearchField;\n"],"file":"SearchField.js"}

package/dist/esm/InputFields/styling.js

@@ -1,213 +1,38 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+
 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};
-`;
+import { Z_INDEXES } from '../styles/z-indexes';
+export var InputWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n  ", ";\n  ", "\n"])), function (props) {
+  return props.locked || props.disabled ? 'cursor: not-allowed;' : '';
+}, function (props) {
+  return props.margin ? "margin: ".concat(props.margin, ";") : '';
+});
+var lockedState = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", " !important;\n  color: ", " !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n"])), COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_600);
+export var activeValidationMessageState = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n  -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), COLORS.warning_400, COLORS.warning_400, COLORS.warning_400);
+var activeErrorMessageState = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n  -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), COLORS.critical_400, COLORS.critical_400, COLORS.critical_400);
+var activeCorrectInput = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n  -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), COLORS.correct_500, COLORS.correct_500, COLORS.correct_500);
+var InputFieldStyling = styled.input(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ", "\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  outline: none;\n\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  ", "\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    outline: none;\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    z-index: ", ";\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 ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.active {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n  \n"])), function (props) {
+  return props.withoutBorder ? "-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      " : "-webkit-box-shadow: inset 0px 0px 0px 1px ".concat(COLORS.neutral_400, ";\n      -moz-box-shadow: inset 0px 0px 0px 1px ").concat(COLORS.neutral_400, ";\n      box-shadow: inset 0px 0px 0px 1px ").concat(COLORS.neutral_400, ";");
+}, ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), BREAKPOINTS.MEDIUM, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600), COLORS.black, function (props) {
+  return props.locked ? lockedState : '';
+}, function (props) {
+  return props.activeValidationMessage ? activeValidationMessageState : '';
+}, function (props) {
+  return props.activeErrorMessage ? activeErrorMessageState : '';
+}, function (props) {
+  return props.correctInput ? activeCorrectInput : '';
+}, COLORS.neutral_100, COLORS.neutral_300, COLORS.primary_800, Z_INDEXES.focus, COLORS.primary_700, COLORS.primary_700, COLORS.primary_700, COLORS.primary_800, COLORS.primary_800, COLORS.primary_800);
+var ValidationStyling = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  &.error-msg {\n    ", "\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ", "\n    font-weight: 700;\n    line-height: 15px;\n  }\n"])), ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentXXSStyling(ComponentTextStyle.Regular, '#e76468'));
+export var RequiredStar = styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 28px;\n  line-height: 12px;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n"])), COLORS.critical_500);
+export var Warning = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  font-size: 12px;\n  line-height: 140%;\n\n  ", " {\n    font-size: 14px;\n  }\n\n  &.small {\n    font-size: 12px;\n  }\n  &.medium {\n    font-size: 14px;\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n"])), BREAKPOINTS.MEDIUM);
+export var WarningMessage = styled(Warning)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.warning_500);
+export var ErrorMessage = styled(Warning)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.critical_500);
+export var AutofilledMessage = styled(Warning)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.neutral_600);
 export { ValidationStyling, InputFieldStyling };
-export const StyledIcon = styled.div`
-  border-radius: 50%;
-`;
-export const SearchIconWrapper = styled(StyledIcon)`
-  position: absolute;
-  border-radius: 50%;
-`;
+export var StyledIcon = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  border-radius: 50%;\n"])));
+export var SearchIconWrapper = styled(StyledIcon)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  position: absolute;\n  border-radius: 50%;\n"])));
 //# sourceMappingURL=styling.js.map

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

@@ -1 +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":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,WAApC;AACA,SAASC,mBAAT,EAA8BC,kBAA9B,EAAkDC,iBAAlD,EAAqEC,iBAArE,QAA8F,sBAA9F;AAEA,OAAO,MAAMC,YAAY,GAAGR,MAAM,CAACS,GAA+D;AAClG;AACA,IAAKC,KAAD,IAAYA,KAAK,CAACC,MAAN,IAAgBD,KAAK,CAACE,QAAtB,GAAiC,sBAAjC,GAA0D,EAAI;AAC9E,IAAKF,KAAD,IAAYA,KAAK,CAACG,MAAN,GAAgB,WAAUH,KAAK,CAACG,MAAO,GAAvC,GAA4C,EAAI;AAChE,CAJO;AAMP,MAAMC,WAAW,GAAGb,GAAI;AACxB,sBAAsBE,MAAM,CAACY,WAAY;AACzC,sCAAsCZ,MAAM,CAACa,WAAY;AACzD,WAAWb,MAAM,CAACc,WAAY;AAC9B;AACA;AACA;AACA,CAPA;AAQA,OAAO,MAAMC,4BAA4B,GAAGjB,GAAI;AAChD,8CAA8CE,MAAM,CAACgB,WAAY;AACjE,2CAA2ChB,MAAM,CAACgB,WAAY;AAC9D,sCAAsChB,MAAM,CAACgB,WAAY;AACzD,CAJO;AAKP,MAAMC,uBAAuB,GAAGnB,GAAI;AACpC,8CAA8CE,MAAM,CAACkB,YAAa;AAClE,2CAA2ClB,MAAM,CAACkB,YAAa;AAC/D,sCAAsClB,MAAM,CAACkB,YAAa;AAC1D,CAJA;AAKA,MAAMC,kBAAkB,GAAGrB,GAAI;AAC/B,8CAA8CE,MAAM,CAACoB,WAAY;AACjE,2CAA2CpB,MAAM,CAACoB,WAAY;AAC9D,sCAAsCpB,MAAM,CAACoB,WAAY;AACzD,CAJA;AAKA,OAAO,MAAMC,eAAe,GAAGvB,GAAI;AACnC;AACA;AACA,CAHO;AAKP,MAAMwB,iBAAiB,GAAGzB,MAAM,CAAC0B,KAS9B;AACH;AACA;AACA;AACA;AACA;AACA;AACA,IAAKhB,KAAD,IACAA,KAAK,CAACiB,aAAN,GACK;AACT;AACA;AACA,OAJI,GAKK,6CAA4CxB,MAAM,CAACyB,WAAY;AACxE,+CAA+CzB,MAAM,CAACyB,WAAY;AAClE,0CAA0CzB,MAAM,CAACyB,WAAY,GAAG;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMtB,iBAAiB,CAACD,kBAAkB,CAACwB,MAApB,EAA4B1B,MAAM,CAACc,WAAnC,CAAgD;AACvE;AACA;AACA,IAAIf,WAAW,CAAC4B,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA,QAAQvB,iBAAiB,CAACF,kBAAkB,CAACwB,MAApB,EAA4B1B,MAAM,CAACc,WAAnC,CAAgD;AACzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAWd,MAAM,CAAC4B,KAAM;AACxB;AACA,IAAKrB,KAAD,IAAYA,KAAK,CAACC,MAAN,GAAeG,WAAf,GAA6B,EAAI;AACjD,IAAKJ,KAAD,IAAYA,KAAK,CAACsB,uBAAN,GAAgCd,4BAAhC,GAA+D,EAAI;AACnF,IAAKR,KAAD,IAAYA,KAAK,CAACuB,kBAAN,GAA2Bb,uBAA3B,GAAqD,EAAI;AACzE,IAAKV,KAAD,IAAYA,KAAK,CAACwB,YAAN,GAAqBZ,kBAArB,GAA0C,EAAI;AAC9D,IAAKZ,KAAD,IAAYA,KAAK,CAACyB,UAAN,GAAmBX,eAAnB,GAAqC,EAAI;AACzD;AACA;AACA,wBAAwBrB,MAAM,CAACY,WAAY;AAC3C;AACA;AACA;AACA;AACA,aAAaZ,MAAM,CAACa,WAAY;AAChC;AACA;AACA,gDAAgDb,MAAM,CAACiC,WAAY;AACnE,6CAA6CjC,MAAM,CAACiC,WAAY;AAChE,wCAAwCjC,MAAM,CAACiC,WAAY;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gDAAgDjC,MAAM,CAACkC,WAAY;AACnE,6CAA6ClC,MAAM,CAACkC,WAAY;AAChE,wCAAwClC,MAAM,CAACkC,WAAY;AAC3D;AACA;AACA;AACA,gDAAgDlC,MAAM,CAACiC,WAAY;AACnE,6CAA6CjC,MAAM,CAACiC,WAAY;AAChE,wCAAwCjC,MAAM,CAACiC,WAAY;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CA3HA;AA6HA,MAAME,iBAAiB,GAAGrC,GAAI;AAC9B;AACA,MAAMG,mBAAmB,CAACC,kBAAkB,CAACkC,OAApB,EAA6BpC,MAAM,CAAC4B,KAApC,CAA2C;AACpE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM3B,mBAAmB,CAACC,kBAAkB,CAACkC,OAApB,EAA6B,SAA7B,CAAwC;AACjE;AACA;AACA;AACA,CAfA;AAiBA,OAAO,MAAMC,YAAY,GAAGxC,MAAM,CAACyC,IAAK;AACxC,WAAWtC,MAAM,CAACuC,YAAa;AAC/B;AACA;AACA;AACA;AACA;AACA,CAPO;AAQP,OAAO,MAAMC,OAAO,GAAG3C,MAAM,CAACS,GAAI;AAClC;AACA;AACA;AACA,IAAIP,WAAW,CAAC4B,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAvBO;AAwBP,OAAO,MAAMc,cAAc,GAAG5C,MAAM,CAAC2C,OAAD,CAAU;AAC9C,WAAWxC,MAAM,CAAC0C,WAAY;AAC9B,CAFO;AAGP,OAAO,MAAMC,YAAY,GAAG9C,MAAM,CAAC2C,OAAD,CAAU;AAC5C,WAAWxC,MAAM,CAACuC,YAAa;AAC/B,CAFO;AAGP,OAAO,MAAMK,iBAAiB,GAAG/C,MAAM,CAAC2C,OAAD,CAAU;AACjD,WAAWxC,MAAM,CAACc,WAAY;AAC9B,CAFO;AAIP,SAASqB,iBAAT,EAA4Bb,iBAA5B;AAEA,OAAO,MAAMuB,UAAU,GAAGhD,MAAM,CAACS,GAAI;AACrC;AACA,CAFO;AAIP,OAAO,MAAMwC,iBAAiB,GAAGjD,MAAM,CAACgD,UAAD,CAAa;AACpD;AACA;AACA,CAHO","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"}
+{"version":3,"sources":["../../../src/InputFields/styling.ts"],"names":["styled","css","BREAKPOINTS","COLORS","ComponentXXSStyling","ComponentTextStyle","ComponentSStyling","ComponentMStyling","Z_INDEXES","InputWrapper","div","props","locked","disabled","margin","lockedState","neutral_100","neutral_300","neutral_600","activeValidationMessageState","warning_400","activeErrorMessageState","critical_400","activeCorrectInput","correct_500","InputFieldStyling","input","withoutBorder","neutral_400","Italic","MEDIUM","black","activeValidationMessage","activeErrorMessage","correctInput","primary_800","focus","primary_700","ValidationStyling","Regular","RequiredStar","span","critical_500","Warning","WarningMessage","warning_500","ErrorMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"mappings":";;;;AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,WAApC;AACA,SAASC,mBAAT,EAA8BC,kBAA9B,EAAkDC,iBAAlD,EAAqEC,iBAArE,QAA8F,sBAA9F;AACA,SAAQC,SAAR,QAAwB,qBAAxB;AAEA,OAAO,IAAMC,YAAY,GAAGT,MAAM,CAACU,GAAV,2GAErB,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,IAAgBD,KAAK,CAACE,QAAtB,GAAiC,sBAAjC,GAA0D,EAAtE;AAAA,CAFqB,EAGrB,UAACF,KAAD;AAAA,SAAYA,KAAK,CAACG,MAAN,qBAA0BH,KAAK,CAACG,MAAhC,SAA4C,EAAxD;AAAA,CAHqB,CAAlB;AAMP,IAAMC,WAAW,GAAGd,GAAH,yPACKE,MAAM,CAACa,WADZ,EAEqBb,MAAM,CAACc,WAF5B,EAGNd,MAAM,CAACe,WAHD,CAAjB;AAQA,OAAO,IAAMC,4BAA4B,GAAGlB,GAAH,wNACKE,MAAM,CAACiB,WADZ,EAEEjB,MAAM,CAACiB,WAFT,EAGHjB,MAAM,CAACiB,WAHJ,CAAlC;AAKP,IAAMC,uBAAuB,GAAGpB,GAAH,wNACiBE,MAAM,CAACmB,YADxB,EAEcnB,MAAM,CAACmB,YAFrB,EAGSnB,MAAM,CAACmB,YAHhB,CAA7B;AAKA,IAAMC,kBAAkB,GAAGtB,GAAH,wNACsBE,MAAM,CAACqB,WAD7B,EAEmBrB,MAAM,CAACqB,WAF1B,EAGcrB,MAAM,CAACqB,WAHrB,CAAxB;AAMA,IAAMC,iBAAiB,GAAGzB,MAAM,CAAC0B,KAAV,65DAenB,UAACf,KAAD;AAAA,SACAA,KAAK,CAACgB,aAAN,oJAKiDxB,MAAM,CAACyB,WALxD,6DAM2CzB,MAAM,CAACyB,WANlD,wDAOsCzB,MAAM,CAACyB,WAP7C,MADA;AAAA,CAfmB,EAiCjBtB,iBAAiB,CAACD,kBAAkB,CAACwB,MAApB,EAA4B1B,MAAM,CAACe,WAAnC,CAjCA,EAoCnBhB,WAAW,CAAC4B,MApCO,EA2CfvB,iBAAiB,CAACF,kBAAkB,CAACwB,MAApB,EAA4B1B,MAAM,CAACe,WAAnC,CA3CF,EA8DZf,MAAM,CAAC4B,KA9DK,EAgEnB,UAACpB,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,GAAeG,WAAf,GAA6B,EAAzC;AAAA,CAhEmB,EAiEnB,UAACJ,KAAD;AAAA,SAAYA,KAAK,CAACqB,uBAAN,GAAgCb,4BAAhC,GAA+D,EAA3E;AAAA,CAjEmB,EAkEnB,UAACR,KAAD;AAAA,SAAYA,KAAK,CAACsB,kBAAN,GAA2BZ,uBAA3B,GAAqD,EAAjE;AAAA,CAlEmB,EAmEnB,UAACV,KAAD;AAAA,SAAYA,KAAK,CAACuB,YAAN,GAAqBX,kBAArB,GAA0C,EAAtD;AAAA,CAnEmB,EAsECpB,MAAM,CAACa,WAtER,EA2EVb,MAAM,CAACc,WA3EG,EA8EiBd,MAAM,CAACgC,WA9ExB,EAoFR3B,SAAS,CAAC4B,KApFF,EAwGyBjC,MAAM,CAACkC,WAxGhC,EAyGsBlC,MAAM,CAACkC,WAzG7B,EA0GiBlC,MAAM,CAACkC,WA1GxB,EA8GyBlC,MAAM,CAACgC,WA9GhC,EA+GsBhC,MAAM,CAACgC,WA/G7B,EAgHiBhC,MAAM,CAACgC,WAhHxB,CAAvB;AA6HA,IAAMG,iBAAiB,GAAGrC,GAAH,uTAEjBG,mBAAmB,CAACC,kBAAkB,CAACkC,OAApB,EAA6BpC,MAAM,CAAC4B,KAApC,CAFF,EAWjB3B,mBAAmB,CAACC,kBAAkB,CAACkC,OAApB,EAA6B,SAA7B,CAXF,CAAvB;AAiBA,OAAO,IAAMC,YAAY,GAAGxC,MAAM,CAACyC,IAAV,8LACdtC,MAAM,CAACuC,YADO,CAAlB;AAQP,OAAO,IAAMC,OAAO,GAAG3C,MAAM,CAACU,GAAV,+VAIhBR,WAAW,CAAC4B,MAJI,CAAb;AAwBP,OAAO,IAAMc,cAAc,GAAG5C,MAAM,CAAC2C,OAAD,CAAT,4FAChBxC,MAAM,CAAC0C,WADS,CAApB;AAGP,OAAO,IAAMC,YAAY,GAAG9C,MAAM,CAAC2C,OAAD,CAAT,4FACdxC,MAAM,CAACuC,YADO,CAAlB;AAGP,OAAO,IAAMK,iBAAiB,GAAG/C,MAAM,CAAC2C,OAAD,CAAT,4FACnBxC,MAAM,CAACe,WADY,CAAvB;AAIP,SAASoB,iBAAT,EAA4Bb,iBAA5B;AAEA,OAAO,IAAMuB,UAAU,GAAGhD,MAAM,CAACU,GAAV,kGAAhB;AAIP,OAAO,IAAMuC,iBAAiB,GAAGjD,MAAM,CAACgD,UAAD,CAAT,yHAAvB","sourcesContent":["import styled, { css } from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { ComponentXXSStyling, ComponentTextStyle, ComponentSStyling, ComponentMStyling } from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\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`;\n\nconst InputFieldStyling = styled.input<{\n  locked?: boolean;\n  activeValidationMessage?: boolean;\n  activeErrorMessage?: boolean;\n  correctInput?: boolean;\n  active?: 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  outline: none;\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\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    outline: none;\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    z-index: ${Z_INDEXES.focus};\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`;\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

@@ -1,6 +1,10 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3;
+
 import styled from 'styled-components';
 import { BREAKPOINTS } from '../styles';
-const GRID = {
+var GRID = {
   GAP: {
     SMALL: '24px',
     MEDIUM: '32px',
@@ -12,80 +16,21 @@ const GRID = {
     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;
-  }
-`;
+export var PageWidth = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  margin: 0 ", ";\n\n  ", " {\n    margin: 0 ", ";\n  }\n  ", " {\n    margin: 0 ", ";\n  }\n\n  ", " {\n    max-width: ", ";\n    margin: 0 auto;\n  }\n"])), GRID.GUTTER.SMALL, BREAKPOINTS.MEDIUM, GRID.GUTTER.MEDIUM, BREAKPOINTS.LARGE, GRID.GUTTER.LARGE, BREAKPOINTS.XLARGE, function (props) {
+  return props.useMaxWidth ? props.maxWidth ? 'min(100% - 112px,' + props.maxWidth + 'px)' : 'calc(100% - 112px)' : '1088px';
+});
+export var Columns = styled.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: grid;\n  grid-gap: ", ";\n  word-break: break-word; /* Prevent long words from breaking the layout \u2013 consider making this rule global */\n\n  ", " {\n    grid-template-columns: ", ";\n    -ms-grid-columns: ", ";\n    grid-gap: ", ";\n  }\n\n  ", " {\n    grid-gap: ", ";\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: ", ";\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ", ";\n  }\n"])), function (props) {
+  return props.gap || GRID.GAP.SMALL;
+}, BREAKPOINTS.MEDIUM, function (props) {
+  return props.columns;
+}, function (props) {
+  return props.columns;
+}, function (props) {
+  return props.gap || GRID.GAP.MEDIUM;
+}, BREAKPOINTS.LARGE, function (props) {
+  return props.gap || GRID.GAP.LARGE;
+}, GRID.GAP.MEDIUM, function (props) {
+  return props.printColumns || 'none';
+});
+export var ContainerMargins = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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"])));
 //# sourceMappingURL=index.js.map

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

@@ -1 +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"}
+{"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,IAAMC,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,IAAME,SAAS,GAAGR,MAAM,CAACS,GAAV,oPAERP,IAAI,CAACK,MAAL,CAAYH,KAFJ,EAIlBH,WAAW,CAACI,MAJM,EAKNH,IAAI,CAACK,MAAL,CAAYF,MALN,EAOlBJ,WAAW,CAACK,KAPM,EAQNJ,IAAI,CAACK,MAAL,CAAYD,KARN,EAWlBL,WAAW,CAACS,MAXM,EAYL,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,WAAN,GAAqBD,KAAK,CAACE,QAAN,GAAiB,sBAAsBF,KAAK,CAACE,QAA5B,GAAuC,KAAxD,GAAgE,oBAArF,GAA6G,QAAzH;AAAA,CAZK,CAAf;AAiBP,OAAO,IAAMC,OAAO,GAAGd,MAAM,CAACe,OAAV,snBAGN,UAACJ,KAAD;AAAA,SAAWA,KAAK,CAACK,GAAN,IAAad,IAAI,CAACC,GAAL,CAASC,KAAjC;AAAA,CAHM,EAMhBH,WAAW,CAACI,MANI,EAOS,UAACM,KAAD;AAAA,SAAWA,KAAK,CAACM,OAAjB;AAAA,CAPT,EAQI,UAACN,KAAD;AAAA,SAAWA,KAAK,CAACM,OAAjB;AAAA,CARJ,EASJ,UAACN,KAAD;AAAA,SAAWA,KAAK,CAACK,GAAN,IAAad,IAAI,CAACC,GAAL,CAASE,MAAjC;AAAA,CATI,EAYhBJ,WAAW,CAACK,KAZI,EAaJ,UAACK,KAAD;AAAA,SAAWA,KAAK,CAACK,GAAN,IAAad,IAAI,CAACC,GAAL,CAASG,KAAjC;AAAA,CAbI,EAoBCJ,IAAI,CAACC,GAAL,CAASE,MApBV,EA0BS,UAACM,KAAD;AAAA,SAAWA,KAAK,CAACO,YAAN,IAAsB,MAAjC;AAAA,CA1BT,CAAb;AA8BP,OAAO,IAAMC,gBAAgB,GAAGnB,MAAM,CAACS,GAAV,o0BAAtB","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"}