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

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';\r\nimport { render } from '@testing-library/react';\r\nimport {Size} from '../../types';\r\nimport 'jest-styled-components';\r\nimport { QuickSearch } from '..';\r\n\r\ndescribe('<QuickSearch />', () => {\r\n  it('Renders quick search', async () => {\r\n    let search = '';\r\n    let searchEntered = false;\r\n    const { queryByText, getByTestId, queryAllByTestId } = render(\r\n      <div style={{ width: '400px' }}>\r\n        <QuickSearch\r\n          id=\"QuickSearch\"\r\n          size={Size.Small}\r\n          enterSearch={() => {\r\n            searchEntered = true;\r\n          }}\r\n          removeSearch={() => {\r\n            search = '';\r\n          }}\r\n          setSearchTerm={(term) => {\r\n            search = term;\r\n          }}\r\n        />\r\n      </div>,\r\n    );\r\n    expect(getByTestId('QuickSearch_main').classList.contains('small')).toBeTruthy();\r\n    expect(getByTestId('QuickSearch_Searchbutton')).toBeDefined();\r\n\r\n    // Test click on icon and check that input field shows\r\n    expect(queryAllByTestId('QuickSearch').length).toBe(0);\r\n    (getByTestId('QuickSearch_Searchbutton') as HTMLButtonElement)?.click();\r\n    expect(getByTestId('QuickSearch')).toBeDefined();\r\n    expect(getByTestId('QuickSearch_main').classList.contains('expanded')).toBeTruthy();\r\n    expect(getByTestId('QuickSearch_Clearicon').parentElement).toHaveProperty('hidden');\r\n  });\r\n});\r\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';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\r\nimport { Size } from '../../types';\r\nimport { ComponentMStyling, ComponentSStyling } from '../../styles/typography';\r\n\r\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\r\n  appearance: none;\r\n  width: calc(100% - 96px);\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n\r\n  /* To prevent browser putting its own cross inside the search bar */\r\n  ::-ms-clear {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n  ::-ms-reveal {\r\n    display: none;\r\n    width: 0;\r\n    height: 0;\r\n  }\r\n  ::-webkit-search-decoration,\r\n  ::-webkit-search-cancel-button,\r\n  ::-webkit-search-results-button,\r\n  ::-webkit-search-results-decoration {\r\n    display: none;\r\n  }\r\n\r\n  ::placeholder {\r\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n  }\r\n\r\n  &:focus {\r\n    outline-width: 0;\r\n  }\r\n`;\r\n\r\nexport const BigSearch = styled(Search)`\r\n  height: 32px;\r\n  border-width: 0;\r\n  margin-left: 50px;\r\n  outline: none;\r\n\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n\r\n  ::placeholder {\r\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n  }\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ::placeholder {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n  &.small {\r\n    ::placeholder {\r\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n  &.medium {\r\n    ::placeholder {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n  &:disabled {\r\n    background: transparent;\r\n    border: none;\r\n  }\r\n`;\r\n\r\ntype SearchBarInputProps = {\r\n  id: string;\r\n  searchTerm?: string;\r\n  setSearchTerm: (term: string) => void;\r\n  enterSearch: (e: any) => void;\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  onKeyDown?: (e: React.KeyboardEvent) => void;\r\n  size?: Size.Small | Size.Medium;\r\n  setTabbedHere: (tabbedHere: boolean) => void;\r\n  onBlur?: (e: any) => void;\r\n};\r\n\r\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\r\n  const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, setTabbedHere, onBlur } = props;\r\n  const isPressingEnter = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n      return true;\r\n    }\r\n    return false;\r\n  };\r\n\r\n  return (\r\n    <BigSearch\r\n      placeholder={disabled ? '' : placeholder}\r\n      id={id}\r\n      data-testid={id}\r\n      className={size ? size : ''}\r\n      tabIndex={0}\r\n      disabled={disabled}\r\n      onChange={(e: any) => setSearchTerm(e.target.value)}\r\n      value={searchTerm}\r\n      ref={ref}\r\n      onBlur={(e) => (onBlur ? onBlur(e) : setTabbedHere(false))}\r\n      onKeyDown={onKeyDown}\r\n      onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\r\n    />\r\n  );\r\n});\r\n\r\nexport default SearchBarInput;\r\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';\r\nimport styled, {css} from 'styled-components';\r\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles/index';\r\nimport {activeValidationMessageState, tabbedHereStyle} from '../styling';\r\nimport {ComponentMStyling, ComponentSStyling} from '../../styles/typography';\r\n\r\nconst DisabledState = css`\r\n  border: 1px solid ${COLORS.neutral_100};\r\n  pointer-events: none;\r\n  background-color: transparent !important;\r\n  box-shadow: none !important;\r\n`;\r\n\r\nexport const StyledSearchField = styled.div<{ disabled?: boolean; activeValidationMessage?: boolean; tabbedHere?: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\r\n  box-sizing: border-box;\r\n  border-radius: 56px;\r\n  align-items: center;\r\n  position: relative;\r\n  height: 48px;\r\n  appearance: none;\r\n  background-color: ${COLORS.white};\r\n\r\n  ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n\r\n  padding: 0 !important;\r\n  width: 100%;\r\n  ::placeholder {\r\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n  }\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n\r\n    height: 56px;\r\n    padding: 0 4px !important;\r\n    &::placeholder {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n    }\r\n  }\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    height: 48px;\r\n    padding: 0 !important;\r\n    &::placeholder {\r\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n    }\r\n  }\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    height: 56px;\r\n    &::placeholder {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\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    border-color: transparent;\r\n  }\r\n  &:focus-within {\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    border-color: transparent;\r\n  }\r\n  &:disabled {\r\n    border: 1px solid ${COLORS.neutral_100};\r\n    pointer-events: none;\r\n    background-color: transparent !important;\r\n  }\r\n  div {\r\n    color: ${COLORS.neutral_600};\r\n    background-color: transparent;\r\n  }\r\n  ${(props) => (props.disabled ? DisabledState : '')}\r\n  ${(props) => (props.activeValidationMessage ? activeValidationMessageState : '')}\r\n  ${(props) => (props.tabbedHere ? tabbedHereStyle : '')}\r\n`;\r\n\r\ntype SeachFieldProps = {\r\n  id: string;\r\n  searchTerm?: string;\r\n  disabled?: boolean;\r\n  validationMessage?: string;\r\n  children: any;\r\n  tabbedHere: boolean;\r\n  size: string;\r\n};\r\n\r\nconst SearchField: React.FunctionComponent<SeachFieldProps> = ({ id, searchTerm, disabled, validationMessage, children, tabbedHere, size }) => {\r\n  return (\r\n    <StyledSearchField\r\n      id={`${id}_main`}\r\n      className={(searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '')}\r\n      disabled={disabled}\r\n      tabbedHere={tabbedHere}\r\n      tabIndex={-1}\r\n      activeValidationMessage={validationMessage !== undefined && validationMessage !== ''}>\r\n      {children}\r\n    </StyledSearchField>\r\n  );\r\n};\r\n\r\nexport default SearchField;\r\n"],"file":"SearchField.js"}

package/dist/esm/InputFields/index.js

@@ -1,11 +0,0 @@
-import TextField from './TextField';
-import PasswordField from './PasswordField';
-import Checkbox from './Checkbox';
-import RadioButton from './RadioButton';
-import SearchBar from './SearchBar';
-import InputLabel from './Label';
-import DatepickerField from './DatepickerField';
-import Textarea from './Textarea';
-import QuickSearch from './QuickSearch';
-export { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch };
-//# sourceMappingURL=index.js.map

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';\r\nimport PasswordField from './PasswordField';\r\nimport Checkbox from './Checkbox';\r\nimport RadioButton from './RadioButton';\r\nimport SearchBar from './SearchBar';\r\nimport InputLabel from './Label';\r\nimport DatepickerField from './DatepickerField';\r\nimport Textarea from './Textarea';\r\nimport QuickSearch from './QuickSearch';\r\n\r\nexport { TextField, PasswordField, Checkbox, RadioButton, SearchBar, InputLabel, DatepickerField, Textarea, QuickSearch };\r\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';\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/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';\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"}