@laerdal/life-react-components 3.5.1-dev.16 → 3.5.1-dev.18

package/dist/umd/InputFields/styling.js

@@ -1,240 +0,0 @@
-(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

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

package/dist/umd/Layouts/index.js

@@ -1,118 +0,0 @@
-(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

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