@laerdal/life-react-components 1.4.1-dev.6 → 1.4.1-dev.8

package/dist/esm/InputFields/__tests__/QuickSearch.test.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Size } from '../../types';
-import 'jest-styled-components';
-import { QuickSearch } from '..';
-describe('<QuickSearch />', () => {
-  it('Renders quick search', async () => {
-    let search = '';
-    let searchEntered = false;
-    const {
-      queryByText,
-      getByTestId,
-      queryAllByTestId
-    } = render( /*#__PURE__*/React.createElement("div", {
-      style: {
-        width: '400px'
-      }
-    }, /*#__PURE__*/React.createElement(QuickSearch, {
-      id: "QuickSearch",
-      size: Size.Small,
-      enterSearch: () => {
-        searchEntered = true;
-      },
-      removeSearch: () => {
-        search = '';
-      },
-      setSearchTerm: term => {
-        search = term;
-      }
-    })));
-    expect(getByTestId('QuickSearch_main').classList.contains('small')).toBeTruthy();
-    expect(getByTestId('QuickSearch_Searchbutton')).toBeDefined(); // Test click on icon and check that input field shows
-
-    expect(queryAllByTestId('QuickSearch').length).toBe(0);
-    getByTestId('QuickSearch_Searchbutton')?.click();
-    expect(getByTestId('QuickSearch')).toBeDefined();
-    expect(getByTestId('QuickSearch_main').classList.contains('expanded')).toBeTruthy();
-    expect(getByTestId('QuickSearch_Clearicon').parentElement).toHaveProperty('hidden');
-  });
-});
-//# sourceMappingURL=QuickSearch.test.js.map

package/dist/esm/InputFields/__tests__/QuickSearch.test.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/InputFields/__tests__/QuickSearch.test.tsx"],"names":["React","render","Size","QuickSearch","describe","it","search","searchEntered","queryByText","getByTestId","queryAllByTestId","width","Small","term","expect","classList","contains","toBeTruthy","toBeDefined","length","toBe","click","parentElement","toHaveProperty"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,MAAT,QAAuB,wBAAvB;AACA,SAAQC,IAAR,QAAmB,aAAnB;AACA,OAAO,wBAAP;AACA,SAASC,WAAT,QAA4B,IAA5B;AAEAC,QAAQ,CAAC,iBAAD,EAAoB,MAAM;AAChCC,EAAAA,EAAE,CAAC,sBAAD,EAAyB,YAAY;AACrC,QAAIC,MAAM,GAAG,EAAb;AACA,QAAIC,aAAa,GAAG,KAApB;AACA,UAAM;AAAEC,MAAAA,WAAF;AAAeC,MAAAA,WAAf;AAA4BC,MAAAA;AAA5B,QAAiDT,MAAM,eAC3D;AAAK,MAAA,KAAK,EAAE;AAAEU,QAAAA,KAAK,EAAE;AAAT;AAAZ,oBACE,oBAAC,WAAD;AACE,MAAA,EAAE,EAAC,aADL;AAEE,MAAA,IAAI,EAAET,IAAI,CAACU,KAFb;AAGE,MAAA,WAAW,EAAE,MAAM;AACjBL,QAAAA,aAAa,GAAG,IAAhB;AACD,OALH;AAME,MAAA,YAAY,EAAE,MAAM;AAClBD,QAAAA,MAAM,GAAG,EAAT;AACD,OARH;AASE,MAAA,aAAa,EAAGO,IAAD,IAAU;AACvBP,QAAAA,MAAM,GAAGO,IAAT;AACD;AAXH,MADF,CAD2D,CAA7D;AAiBAC,IAAAA,MAAM,CAACL,WAAW,CAAC,kBAAD,CAAX,CAAgCM,SAAhC,CAA0CC,QAA1C,CAAmD,OAAnD,CAAD,CAAN,CAAoEC,UAApE;AACAH,IAAAA,MAAM,CAACL,WAAW,CAAC,0BAAD,CAAZ,CAAN,CAAgDS,WAAhD,GArBqC,CAuBrC;;AACAJ,IAAAA,MAAM,CAACJ,gBAAgB,CAAC,aAAD,CAAhB,CAAgCS,MAAjC,CAAN,CAA+CC,IAA/C,CAAoD,CAApD;AACCX,IAAAA,WAAW,CAAC,0BAAD,CAAZ,EAAgEY,KAAhE;AACAP,IAAAA,MAAM,CAACL,WAAW,CAAC,aAAD,CAAZ,CAAN,CAAmCS,WAAnC;AACAJ,IAAAA,MAAM,CAACL,WAAW,CAAC,kBAAD,CAAX,CAAgCM,SAAhC,CAA0CC,QAA1C,CAAmD,UAAnD,CAAD,CAAN,CAAuEC,UAAvE;AACAH,IAAAA,MAAM,CAACL,WAAW,CAAC,uBAAD,CAAX,CAAqCa,aAAtC,CAAN,CAA2DC,cAA3D,CAA0E,QAA1E;AACD,GA7BC,CAAF;AA8BD,CA/BO,CAAR","sourcesContent":["import React from 'react';\nimport { render } from '@testing-library/react';\nimport {Size} from '../../types';\nimport 'jest-styled-components';\nimport { QuickSearch } from '..';\n\ndescribe('<QuickSearch />', () => {\n  it('Renders quick search', async () => {\n    let search = '';\n    let searchEntered = false;\n    const { queryByText, getByTestId, queryAllByTestId } = render(\n      <div style={{ width: '400px' }}>\n        <QuickSearch\n          id=\"QuickSearch\"\n          size={Size.Small}\n          enterSearch={() => {\n            searchEntered = true;\n          }}\n          removeSearch={() => {\n            search = '';\n          }}\n          setSearchTerm={(term) => {\n            search = term;\n          }}\n        />\n      </div>,\n    );\n    expect(getByTestId('QuickSearch_main').classList.contains('small')).toBeTruthy();\n    expect(getByTestId('QuickSearch_Searchbutton')).toBeDefined();\n\n    // Test click on icon and check that input field shows\n    expect(queryAllByTestId('QuickSearch').length).toBe(0);\n    (getByTestId('QuickSearch_Searchbutton') as HTMLButtonElement)?.click();\n    expect(getByTestId('QuickSearch')).toBeDefined();\n    expect(getByTestId('QuickSearch_main').classList.contains('expanded')).toBeTruthy();\n    expect(getByTestId('QuickSearch_Clearicon').parentElement).toHaveProperty('hidden');\n  });\n});\n"],"file":"QuickSearch.test.js"}

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

@@ -1,121 +0,0 @@
-import _pt from "prop-types";
-import * as React from 'react';
-import styled from 'styled-components';
-import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';
-import { ComponentMStyling, ComponentSStyling } from '../../styles/typography';
-export const Search = styled.input.attrs(() => ({
-  type: 'search'
-}))`
-  appearance: none;
-  width: calc(100% - 96px);
-  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}
-
-  /* To prevent browser putting its own cross inside the search bar */
-  ::-ms-clear {
-    display: none;
-    width: 0;
-    height: 0;
-  }
-  ::-ms-reveal {
-    display: none;
-    width: 0;
-    height: 0;
-  }
-  ::-webkit-search-decoration,
-  ::-webkit-search-cancel-button,
-  ::-webkit-search-results-button,
-  ::-webkit-search-results-decoration {
-    display: none;
-  }
-
-  ::placeholder {
-    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}
-  }
-
-  &:focus {
-    outline-width: 0;
-  }
-`;
-export const BigSearch = styled(Search)`
-  height: 32px;
-  border-width: 0;
-  margin-left: 50px;
-  outline: none;
-
-  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
-
-  ::placeholder {
-    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
-  }
-  ${BREAKPOINTS.MEDIUM} {
-    ::placeholder {
-      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
-    }
-  }
-  &.small {
-    ::placeholder {
-      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
-    }
-  }
-  &.medium {
-    ::placeholder {
-      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}
-    }
-  }
-  &:disabled {
-    background: transparent;
-    border: none;
-  }
-`;
-const SearchBarInput = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    id,
-    searchTerm,
-    setSearchTerm,
-    enterSearch,
-    placeholder,
-    disabled,
-    onKeyDown,
-    size,
-    setTabbedHere,
-    onBlur
-  } = props;
-
-  const isPressingEnter = e => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      e.stopPropagation();
-      return true;
-    }
-
-    return false;
-  };
-
-  return /*#__PURE__*/React.createElement(BigSearch, {
-    placeholder: disabled ? '' : placeholder,
-    id: id,
-    "data-testid": id,
-    className: size ? size : '',
-    tabIndex: 0,
-    disabled: disabled,
-    onChange: e => setSearchTerm(e.target.value),
-    value: searchTerm,
-    ref: ref,
-    onBlur: e => onBlur ? onBlur(e) : setTabbedHere(false),
-    onKeyDown: onKeyDown,
-    onKeyPress: e => isPressingEnter(e) ? enterSearch(e) : null
-  });
-});
-SearchBarInput.propTypes = {
-  id: _pt.string.isRequired,
-  searchTerm: _pt.string,
-  setSearchTerm: _pt.func.isRequired,
-  enterSearch: _pt.func.isRequired,
-  placeholder: _pt.string,
-  disabled: _pt.bool,
-  onKeyDown: _pt.func,
-  setTabbedHere: _pt.func.isRequired,
-  onBlur: _pt.func
-};
-export default SearchBarInput;
-//# sourceMappingURL=SearchBarInput.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/InputFields/components/SearchBarInput.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","Search","input","attrs","type","Regular","black","Italic","neutral_500","BigSearch","neutral_600","MEDIUM","SearchBarInput","forwardRef","props","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","setTabbedHere","onBlur","isPressingEnter","e","key","preventDefault","stopPropagation","target","value"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\nimport { Size } from '../../types';\nimport { ComponentMStyling, ComponentSStyling } from '../../styles/typography';\n\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\n  appearance: none;\n  width: calc(100% - 96px);\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  /* To prevent browser putting its own cross inside the search bar */\n  ::-ms-clear {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  ::-ms-reveal {\n    display: none;\n    width: 0;\n    height: 0;\n  }\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    display: none;\n  }\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\n  }\n\n  &:focus {\n    outline-width: 0;\n  }\n`;\n\nexport const BigSearch = styled(Search)`\n  height: 32px;\n  border-width: 0;\n  margin-left: 50px;\n  outline: none;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n  ::placeholder {\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n  ${BREAKPOINTS.MEDIUM} {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.small {\n    ::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &.medium {\n    ::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n  &:disabled {\n    background: transparent;\n    border: none;\n  }\n`;\n\ntype SearchBarInputProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  setTabbedHere: (tabbedHere: boolean) => void;\n  onBlur?: (e: any) => void;\n};\n\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, setTabbedHere, onBlur } = props;\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  return (\n    <BigSearch\n      placeholder={disabled ? '' : placeholder}\n      id={id}\n      data-testid={id}\n      className={size ? size : ''}\n      tabIndex={0}\n      disabled={disabled}\n      onChange={(e: any) => setSearchTerm(e.target.value)}\n      value={searchTerm}\n      ref={ref}\n      onBlur={(e) => (onBlur ? onBlur(e) : setTabbedHere(false))}\n      onKeyDown={onKeyDown}\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\n    />\n  );\n});\n\nexport default SearchBarInput;\n"],"file":"SearchBarInput.js"}

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

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

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

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

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

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

package/dist/esm/InputFields/styling.js

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

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

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

package/dist/esm/Layouts/index.js

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

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

@@ -1 +0,0 @@
-{"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"}