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

package/dist/umd/InputFields/styling.js

@@ -0,0 +1,240 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "styled-components", "../styles", "../styles/typography"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("styled-components"), require("../styles"), require("../styles/typography"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.styledComponents, global.styles, global.typography);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _styledComponents, _styles, _typography) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.SearchIconWrapper = exports.StyledIcon = exports.InputFieldStyling = exports.ValidationStyling = exports.AutofilledMessage = exports.ErrorMessage = exports.WarningMessage = exports.Warning = exports.RequiredStar = exports.tabbedHereStyle = exports.activeValidationMessageState = exports.InputWrapper = undefined;
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const InputWrapper = exports.InputWrapper = _styledComponents2.default.div`
+  outline: none;
+  ${props => props.locked || props.disabled ? 'cursor: not-allowed;' : ''};
+  ${props => props.margin ? `margin: ${props.margin};` : ''}
+`;
+  const lockedState = _styledComponents.css`
+  background-color: ${_styles.COLORS.neutral_100};
+  box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.neutral_300} !important;
+  color: ${_styles.COLORS.neutral_600} !important;
+  pointer-events: none;
+  outline: none;
+  cursor: not-allowed;
+`;
+  const activeValidationMessageState = exports.activeValidationMessageState = _styledComponents.css`
+  -webkit-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.warning_400};
+  -moz-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.warning_400};
+  box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.warning_400};
+`;
+  const activeErrorMessageState = _styledComponents.css`
+  -webkit-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.critical_400};
+  -moz-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.critical_400};
+  box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.critical_400};
+`;
+  const activeCorrectInput = _styledComponents.css`
+  -webkit-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.correct_500};
+  -moz-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.correct_500};
+  box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.correct_500};
+`;
+  const tabbedHereStyle = exports.tabbedHereStyle = _styledComponents.css`
+  outline: none;
+  box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1 !important;
+`;
+  const InputFieldStyling = _styledComponents2.default.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 ${_styles.COLORS.neutral_400};
+      -moz-box-shadow: inset 0px 0px 0px 1px ${_styles.COLORS.neutral_400};
+      box-shadow: inset 0px 0px 0px 1px ${_styles.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 {
+    ${(0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_600)}
+  }
+
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    font-size: 18px;
+    line-height: 18px;
+    height: 56px;
+    padding: 0 16px !important;
+
+    &::placeholder {
+      ${(0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_600)}
+    }
+  }
+
+  &.small {
+    font-size: 16px;
+    height: 48px;
+    &::placeholder {
+      font-size: 16px;
+    }
+  }
+  &.medium {
+    font-size: 18px;
+    height: 56px;
+    &::placeholder {
+      font-size: 18px;
+    }
+  }
+
+  color: ${_styles.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 ${_styles.COLORS.neutral_100};
+    pointer-events: none;
+    box-shadow: none !important;
+    outline: none;
+    cursor: not-allowed;
+    color: ${_styles.COLORS.neutral_300} !important;
+  }
+  &:focus {
+    -webkit-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.primary_800};
+    -moz-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.primary_800};
+    box-shadow: inset 0px 0px 0px 2px ${_styles.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 ${_styles.COLORS.primary_700};
+    -moz-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.primary_700};
+    box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.primary_700};
+  }
+
+  &.active {
+    -webkit-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.primary_800};
+    -moz-box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.primary_800};
+    box-shadow: inset 0px 0px 0px 2px ${_styles.COLORS.primary_800};
+  }
+
+  &.show-checkmark.valid {
+    background-image: none;
+  }
+
+  &.show-checkmark.pending {
+    background-image: none;
+  }
+`;
+  const ValidationStyling = _styledComponents.css`
+  &.error-msg {
+    ${(0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black)}
+    text-align: center;
+    font-weight: 400;
+    box-sizing: border-box;
+  }
+
+  &.error-msg {
+    padding-top: 8px;
+    padding-bottom: 0;
+    ${(0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, '#e76468')}
+    font-weight: 700;
+    line-height: 15px;
+  }
+`;
+  const RequiredStar = exports.RequiredStar = _styledComponents2.default.span`
+  color: ${_styles.COLORS.critical_500};
+  font-size: 28px;
+  line-height: 12px;
+  font-weight: 700;
+  position: relative;
+  top: 10px;
+`;
+  const Warning = exports.Warning = _styledComponents2.default.div`
+  font-size: 12px;
+  line-height: 140%;
+
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    font-size: 14px;
+  }
+
+  &.small {
+    font-size: 12px;
+  }
+  &.medium {
+    font-size: 14px;
+  }
+
+  & * {
+    vertical-align: middle;
+    display: inline-block;
+  }
+
+  svg {
+    margin-right: 4px;
+  }
+`;
+  const WarningMessage = exports.WarningMessage = (0, _styledComponents2.default)(Warning)`
+  color: ${_styles.COLORS.warning_500};
+`;
+  const ErrorMessage = exports.ErrorMessage = (0, _styledComponents2.default)(Warning)`
+  color: ${_styles.COLORS.critical_500};
+`;
+  const AutofilledMessage = exports.AutofilledMessage = (0, _styledComponents2.default)(Warning)`
+  color: ${_styles.COLORS.neutral_600};
+`;
+  exports.ValidationStyling = ValidationStyling;
+  exports.InputFieldStyling = InputFieldStyling;
+  const StyledIcon = exports.StyledIcon = _styledComponents2.default.div`
+  border-radius: 50%;
+`;
+  const SearchIconWrapper = exports.SearchIconWrapper = (0, _styledComponents2.default)(StyledIcon)`
+  position: absolute;
+  border-radius: 50%;
+`;
+});
+//# sourceMappingURL=styling.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/InputFields/styling.ts"],"names":["InputWrapper","styled","div","props","margin","lockedState","css","COLORS","neutral_100","neutral_300","neutral_600","activeValidationMessageState","warning_400","activeErrorMessageState","critical_400","activeCorrectInput","correct_500","tabbedHereStyle","InputFieldStyling","input","neutral_400","ComponentSStyling","ComponentTextStyle","BREAKPOINTS","MEDIUM","ComponentMStyling","black","primary_800","primary_700","ValidationStyling","ComponentXXSStyling","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/umd/Layouts/index.js

@@ -0,0 +1,118 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "styled-components", "../styles"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("styled-components"), require("../styles"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.styledComponents, global.styles);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _styledComponents, _styles) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.ContainerMargins = exports.Columns = exports.PageWidth = undefined;
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const GRID = {
+    GAP: {
+      SMALL: '24px',
+      MEDIUM: '32px',
+      LARGE: '40px'
+    },
+    GUTTER: {
+      SMALL: '16px',
+      MEDIUM: '32px',
+      LARGE: '56px'
+    }
+  };
+  const PageWidth = exports.PageWidth = _styledComponents2.default.div`
+  display: block;
+  margin: 0 ${GRID.GUTTER.SMALL};
+
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    margin: 0 ${GRID.GUTTER.MEDIUM};
+  }
+  ${_styles.BREAKPOINTS.LARGE} {
+    margin: 0 ${GRID.GUTTER.LARGE};
+  }
+
+  ${_styles.BREAKPOINTS.XLARGE} {
+    max-width: ${props => props.useMaxWidth ? props.maxWidth ? 'min(100% - 112px,' + props.maxWidth + 'px)' : 'calc(100% - 112px)' : '1088px'};
+    margin: 0 auto;
+  }
+`;
+  const Columns = exports.Columns = _styledComponents2.default.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 */
+
+  ${_styles.BREAKPOINTS.MEDIUM} {
+    grid-template-columns: ${props => props.columns};
+    -ms-grid-columns: ${props => props.columns};
+    grid-gap: ${props => props.gap || GRID.GAP.MEDIUM};
+  }
+
+  ${_styles.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'};
+  }
+`;
+  const ContainerMargins = exports.ContainerMargins = _styledComponents2.default.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/umd/Layouts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Layouts/index.ts"],"names":["GRID","GAP","SMALL","MEDIUM","LARGE","GUTTER","PageWidth","styled","div","BREAKPOINTS","XLARGE","props","Columns","section","columns","ContainerMargins"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,QAAMA,IAAI,GAAG;AACXC,IAAAA,GAAG,EAAE;AACHC,MAAAA,KAAK,EADF,MAAA;AAEHC,MAAAA,MAAM,EAFH,MAAA;AAGHC,MAAAA,KAAK,EAAE;AAHJ,KADM;AAMXC,IAAAA,MAAM,EAAE;AACNH,MAAAA,KAAK,EADC,MAAA;AAENC,MAAAA,MAAM,EAFA,MAAA;AAGNC,MAAAA,KAAK,EAAE;AAHD;AANG,GAAb;AAaO,QAAME,SAAS,WAATA,SAAS,GAAGC,2BAAOC,GAAkD;AAClF;AACA,cAAcR,IAAI,CAAJA,MAAAA,CAAYE,KAAM;AAChC;AACA,IAAIO,oBAAYN,MAAO;AACvB,gBAAgBH,IAAI,CAAJA,MAAAA,CAAYG,MAAO;AACnC;AACA,IAAIM,oBAAYL,KAAM;AACtB,gBAAgBJ,IAAI,CAAJA,MAAAA,CAAYI,KAAM;AAClC;AACA;AACA,IAAIK,oBAAYC,MAAO;AACvB,iBAAkBC,KAAD,IAAYA,KAAK,CAALA,WAAAA,GAAqBA,KAAK,CAALA,QAAAA,GAAiB,sBAAsBA,KAAK,CAA3B,QAAA,GAAjBA,KAAAA,GAArBA,oBAAAA,GAA6G,QAAU;AACpJ;AACA;AAdO,CAAA;AAiBA,QAAMC,OAAO,WAAPA,OAAO,GAAGL,2BAAOM,OAAmE;AACjG;AACA;AACA,cAAeF,KAAD,IAAWA,KAAK,CAALA,GAAAA,IAAaX,IAAI,CAAJA,GAAAA,CAASE,KAAM;AACrD;AACA;AACA,IAAIO,oBAAYN,MAAO;AACvB,6BAA8BQ,KAAD,IAAWA,KAAK,CAACG,OAAQ;AACtD,wBAAyBH,KAAD,IAAWA,KAAK,CAACG,OAAQ;AACjD,gBAAiBH,KAAD,IAAWA,KAAK,CAALA,GAAAA,IAAaX,IAAI,CAAJA,GAAAA,CAASG,MAAO;AACxD;AACA;AACA,IAAIM,oBAAYL,KAAM;AACtB,gBAAiBO,KAAD,IAAWA,KAAK,CAALA,GAAAA,IAAaX,IAAI,CAAJA,GAAAA,CAASI,KAAM;AACvD;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqBJ,IAAI,CAAJA,GAAAA,CAASG,MAAO;AACrC;AACA;AACA;AACA;AACA;AACA,6BAA8BQ,KAAD,IAAWA,KAAK,CAALA,YAAAA,IAAsB,MAAO;AACrE;AA3BO,CAAA;AA8BA,QAAMI,gBAAgB,WAAhBA,gBAAgB,GAAGR,2BAAOC,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;AA7BO,CAAA","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"}