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

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/InputFields/components/SearchBarInput.tsx"],"names":["Search","styled","input","attrs","type","ComponentTextStyle","Regular","COLORS","black","Italic","neutral_500","BigSearch","neutral_600","BREAKPOINTS","MEDIUM","SearchBarInput","React","forwardRef","props","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","setTabbedHere","onBlur","isPressingEnter","e","key","preventDefault","stopPropagation","target","value"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;;;;;;;AAEO,IAAMA,MAAM,GAAGC,0BAAOC,KAAP,CAAaC,KAAb,CAAmB;AAAA,SAAO;AAAEC,IAAAA,IAAI,EAAE;AAAR,GAAP;AAAA,CAAnB,CAAH,ulBAGf,mCAAkBC,0BAAmBC,OAArC,EAA8CC,cAAOC,KAArD,CAHe,EAwBb,mCAAkBH,0BAAmBI,MAArC,EAA6CF,cAAOG,WAApD,CAxBa,CAAZ;;;AAgCA,IAAMC,SAAS,GAAG,+BAAOX,MAAP,CAAH,ubAMlB,mCAAkBK,0BAAmBC,OAArC,EAA8CC,cAAOC,KAArD,CANkB,EAShB,mCAAkBH,0BAAmBI,MAArC,EAA6CF,cAAOK,WAApD,CATgB,EAWlBC,mBAAYC,MAXM,EAad,mCAAkBT,0BAAmBI,MAArC,EAA6CF,cAAOK,WAApD,CAbc,EAkBd,mCAAkBP,0BAAmBI,MAArC,EAA6CF,cAAOK,WAApD,CAlBc,EAuBd,mCAAkBP,0BAAmBI,MAArC,EAA6CF,cAAOK,WAApD,CAvBc,CAAf;;AA6CP,IAAMG,cAAc,gBAAGC,KAAK,CAACC,UAAN,CAAwD,UAACC,KAAD,EAA6BC,GAA7B,EAAqC;AAClH,MAAQC,EAAR,GAAsHF,KAAtH,CAAQE,EAAR;AAAA,MAAYC,UAAZ,GAAsHH,KAAtH,CAAYG,UAAZ;AAAA,MAAwBC,aAAxB,GAAsHJ,KAAtH,CAAwBI,aAAxB;AAAA,MAAuCC,WAAvC,GAAsHL,KAAtH,CAAuCK,WAAvC;AAAA,MAAoDC,WAApD,GAAsHN,KAAtH,CAAoDM,WAApD;AAAA,MAAiEC,QAAjE,GAAsHP,KAAtH,CAAiEO,QAAjE;AAAA,MAA2EC,SAA3E,GAAsHR,KAAtH,CAA2EQ,SAA3E;AAAA,MAAsFC,IAAtF,GAAsHT,KAAtH,CAAsFS,IAAtF;AAAA,MAA4FC,aAA5F,GAAsHV,KAAtH,CAA4FU,aAA5F;AAAA,MAA2GC,OAA3G,GAAsHX,KAAtH,CAA2GW,MAA3G;;AACA,MAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,CAAD,EAAY;AAClC,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBD,MAAAA,CAAC,CAACE,cAAF;AACAF,MAAAA,CAAC,CAACG,eAAF;AACA,aAAO,IAAP;AACD;;AACD,WAAO,KAAP;AACD,GAPD;;AASA,sBACE,oBAAC,SAAD;AACE,IAAA,WAAW,EAAET,QAAQ,GAAG,EAAH,GAAQD,WAD/B;AAEE,IAAA,EAAE,EAAEJ,EAFN;AAGE,mBAAaA,EAHf;AAIE,IAAA,SAAS,EAAEO,IAAI,GAAGA,IAAH,GAAU,EAJ3B;AAKE,IAAA,QAAQ,EAAE,CALZ;AAME,IAAA,QAAQ,EAAEF,QANZ;AAOE,IAAA,QAAQ,EAAE,kBAACM,CAAD;AAAA,aAAYT,aAAa,CAACS,CAAC,CAACI,MAAF,CAASC,KAAV,CAAzB;AAAA,KAPZ;AAQE,IAAA,KAAK,EAAEf,UART;AASE,IAAA,GAAG,EAAEF,GATP;AAUE,IAAA,MAAM,EAAE,gBAACY,CAAD;AAAA,aAAQF,OAAM,GAAGA,OAAM,CAACE,CAAD,CAAT,GAAeH,aAAa,CAAC,KAAD,CAA1C;AAAA,KAVV;AAWE,IAAA,SAAS,EAAEF,SAXb;AAYE,IAAA,UAAU,EAAE,oBAACK,CAAD;AAAA,aAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBR,WAAW,CAACQ,CAAD,CAAhC,GAAsC,IAAnD;AAAA;AAZd,IADF;AAgBD,CA3BsB,CAAvB;;AAZEX,EAAAA,E;AACAC,EAAAA,U;AACAC,EAAAA,a;AACAC,EAAAA,W;AACAC,EAAAA,W;AACAC,EAAAA,Q;AACAC,EAAAA,S;AAEAE,EAAAA,a;AACAC,EAAAA,M;;eAgCad,c","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/js/InputFields/components/SearchField.d.ts

@@ -1,17 +0,0 @@
-import * as React from 'react';
-export declare const StyledSearchField: import("styled-components").StyledComponent<"div", any, {
-    disabled?: boolean;
-    activeValidationMessage?: boolean;
-    tabbedHere?: boolean;
-}, never>;
-declare type SeachFieldProps = {
-    id: string;
-    searchTerm?: string;
-    disabled?: boolean;
-    validationMessage?: string;
-    children: any;
-    tabbedHere: boolean;
-    size: string;
-};
-declare const SearchField: React.FunctionComponent<SeachFieldProps>;
-export default SearchField;

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

@@ -1,73 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.StyledSearchField = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var React = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _index = require("../../styles/index");
-
-var _styling = require("../styling");
-
-var _typography = require("../../styles/typography");
-
-var _templateObject, _templateObject2;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var DisabledState = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  pointer-events: none;\n  background-color: transparent !important;\n  box-shadow: none !important;\n"])), _index.COLORS.neutral_100);
-
-var StyledSearchField = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  box-sizing: border-box;\n  border-radius: 56px;\n  align-items: center;\n  position: relative;\n  height: 48px;\n  appearance: none;\n  background-color: ", ";\n\n  ", "\n\n  padding: 0 !important;\n  width: 100%;\n  ::placeholder {\n    ", "\n  }\n  ", " {\n    ", "\n\n    height: 56px;\n    padding: 0 4px !important;\n    &::placeholder {\n      ", "\n    }\n  }\n  &.small {\n    ", "\n    height: 48px;\n    padding: 0 !important;\n    &::placeholder {\n      ", "\n    }\n  }\n  &.medium {\n    ", "\n    height: 56px;\n    &::placeholder {\n      ", "\n    }\n  }\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    border-color: transparent;\n  }\n  &:focus-within {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    border-color: transparent;\n  }\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    background-color: transparent !important;\n  }\n  div {\n    color: ", ";\n    background-color: transparent;\n  }\n  ", "\n  ", "\n  ", "\n"])), _index.COLORS.neutral_400, _index.COLORS.white, (0, _typography.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _typography.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500), _index.BREAKPOINTS.MEDIUM, (0, _typography.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _typography.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500), (0, _typography.ComponentSStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _typography.ComponentSStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500), (0, _typography.ComponentMStyling)(_index.ComponentTextStyle.Regular, _index.COLORS.black), (0, _typography.ComponentMStyling)(_index.ComponentTextStyle.Italic, _index.COLORS.neutral_500), _index.COLORS.primary_700, _index.COLORS.primary_700, _index.COLORS.primary_700, _index.COLORS.primary_800, _index.COLORS.primary_800, _index.COLORS.primary_800, _index.COLORS.neutral_100, _index.COLORS.neutral_600, function (props) {
-  return props.disabled ? DisabledState : '';
-}, function (props) {
-  return props.activeValidationMessage ? _styling.activeValidationMessageState : '';
-}, function (props) {
-  return props.tabbedHere ? _styling.tabbedHereStyle : '';
-});
-
-exports.StyledSearchField = StyledSearchField;
-
-var SearchField = function SearchField(_ref) {
-  var id = _ref.id,
-      searchTerm = _ref.searchTerm,
-      disabled = _ref.disabled,
-      validationMessage = _ref.validationMessage,
-      children = _ref.children,
-      tabbedHere = _ref.tabbedHere,
-      size = _ref.size;
-  return /*#__PURE__*/React.createElement(StyledSearchField, {
-    id: "".concat(id, "_main"),
-    className: (searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : ''),
-    disabled: disabled,
-    tabbedHere: tabbedHere,
-    tabIndex: -1,
-    activeValidationMessage: validationMessage !== undefined && validationMessage !== ''
-  }, children);
-};
-
-SearchField.propTypes = {
-  id: _propTypes.default.string.isRequired,
-  searchTerm: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
-  validationMessage: _propTypes.default.string,
-  children: _propTypes.default.any.isRequired,
-  tabbedHere: _propTypes.default.bool.isRequired,
-  size: _propTypes.default.string.isRequired
-};
-var _default = SearchField;
-exports.default = _default;
-//# sourceMappingURL=SearchField.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/InputFields/components/SearchField.tsx"],"names":["DisabledState","css","COLORS","neutral_100","StyledSearchField","styled","div","neutral_400","white","ComponentTextStyle","Regular","black","Italic","neutral_500","BREAKPOINTS","MEDIUM","primary_700","primary_800","neutral_600","props","disabled","activeValidationMessage","activeValidationMessageState","tabbedHere","tabbedHereStyle","SearchField","id","searchTerm","validationMessage","children","size","concat","undefined"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,aAAa,OAAGC,qBAAH,0MACGC,cAAOC,WADV,CAAnB;;AAOO,IAAMC,iBAAiB,GAAGC,0BAAOC,GAAV,y0CAGQJ,cAAOK,WAHf,EAURL,cAAOM,KAVC,EAY1B,mCAAkBC,0BAAmBC,OAArC,EAA8CR,cAAOS,KAArD,CAZ0B,EAiBxB,mCAAkBF,0BAAmBG,MAArC,EAA6CV,cAAOW,WAApD,CAjBwB,EAmB1BC,mBAAYC,MAnBc,EAoBxB,mCAAkBN,0BAAmBC,OAArC,EAA8CR,cAAOS,KAArD,CApBwB,EAyBtB,mCAAkBF,0BAAmBG,MAArC,EAA6CV,cAAOW,WAApD,CAzBsB,EA6BxB,mCAAkBJ,0BAAmBC,OAArC,EAA8CR,cAAOS,KAArD,CA7BwB,EAiCtB,mCAAkBF,0BAAmBG,MAArC,EAA6CV,cAAOW,WAApD,CAjCsB,EAqCxB,mCAAkBJ,0BAAmBC,OAArC,EAA8CR,cAAOS,KAArD,CArCwB,EAwCtB,mCAAkBF,0BAAmBG,MAArC,EAA6CV,cAAOW,WAApD,CAxCsB,EA4CkBX,cAAOc,WA5CzB,EA6Ced,cAAOc,WA7CtB,EA8CUd,cAAOc,WA9CjB,EAkDkBd,cAAOe,WAlDzB,EAmDef,cAAOe,WAnDtB,EAoDUf,cAAOe,WApDjB,EAwDNf,cAAOC,WAxDD,EA6DjBD,cAAOgB,WA7DU,EAgE1B,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,QAAN,GAAiBpB,aAAjB,GAAiC,EAA7C;AAAA,CAhE0B,EAiE1B,UAACmB,KAAD;AAAA,SAAYA,KAAK,CAACE,uBAAN,GAAgCC,qCAAhC,GAA+D,EAA3E;AAAA,CAjE0B,EAkE1B,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACI,UAAN,GAAmBC,wBAAnB,GAAqC,EAAjD;AAAA,CAlE0B,CAAvB;;;;AA+EP,IAAMC,WAAqD,GAAG,SAAxDA,WAAwD,OAAiF;AAAA,MAA9EC,EAA8E,QAA9EA,EAA8E;AAAA,MAA1EC,UAA0E,QAA1EA,UAA0E;AAAA,MAA9DP,QAA8D,QAA9DA,QAA8D;AAAA,MAApDQ,iBAAoD,QAApDA,iBAAoD;AAAA,MAAjCC,QAAiC,QAAjCA,QAAiC;AAAA,MAAvBN,UAAuB,QAAvBA,UAAuB;AAAA,MAAXO,IAAW,QAAXA,IAAW;AAC7I,sBACE,oBAAC,iBAAD;AACE,IAAA,EAAE,YAAKJ,EAAL,UADJ;AAEE,IAAA,SAAS,EAAE,CAACC,UAAU,KAAK,EAAf,GAAoB,eAApB,GAAsC,EAAvC,EAA2CI,MAA3C,CAAkDD,IAAI,GAAGA,IAAH,GAAU,EAAhE,CAFb;AAGE,IAAA,QAAQ,EAAEV,QAHZ;AAIE,IAAA,UAAU,EAAEG,UAJd;AAKE,IAAA,QAAQ,EAAE,CAAC,CALb;AAME,IAAA,uBAAuB,EAAEK,iBAAiB,KAAKI,SAAtB,IAAmCJ,iBAAiB,KAAK;AANpF,KAOGC,QAPH,CADF;AAWD,CAZD;;;AATEH,EAAAA,E;AACAC,EAAAA,U;AACAP,EAAAA,Q;AACAQ,EAAAA,iB;AACAC,EAAAA,Q;AACAN,EAAAA,U;AACAO,EAAAA,I;;eAiBaL,W","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/js/InputFields/index.js

@@ -1,80 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "TextField", {
-  enumerable: true,
-  get: function get() {
-    return _TextField.default;
-  }
-});
-Object.defineProperty(exports, "PasswordField", {
-  enumerable: true,
-  get: function get() {
-    return _PasswordField.default;
-  }
-});
-Object.defineProperty(exports, "Checkbox", {
-  enumerable: true,
-  get: function get() {
-    return _Checkbox.default;
-  }
-});
-Object.defineProperty(exports, "RadioButton", {
-  enumerable: true,
-  get: function get() {
-    return _RadioButton.default;
-  }
-});
-Object.defineProperty(exports, "SearchBar", {
-  enumerable: true,
-  get: function get() {
-    return _SearchBar.default;
-  }
-});
-Object.defineProperty(exports, "InputLabel", {
-  enumerable: true,
-  get: function get() {
-    return _Label.default;
-  }
-});
-Object.defineProperty(exports, "DatepickerField", {
-  enumerable: true,
-  get: function get() {
-    return _DatepickerField.default;
-  }
-});
-Object.defineProperty(exports, "Textarea", {
-  enumerable: true,
-  get: function get() {
-    return _Textarea.default;
-  }
-});
-Object.defineProperty(exports, "QuickSearch", {
-  enumerable: true,
-  get: function get() {
-    return _QuickSearch.default;
-  }
-});
-
-var _TextField = _interopRequireDefault(require("./TextField"));
-
-var _PasswordField = _interopRequireDefault(require("./PasswordField"));
-
-var _Checkbox = _interopRequireDefault(require("./Checkbox"));
-
-var _RadioButton = _interopRequireDefault(require("./RadioButton"));
-
-var _SearchBar = _interopRequireDefault(require("./SearchBar"));
-
-var _Label = _interopRequireDefault(require("./Label"));
-
-var _DatepickerField = _interopRequireDefault(require("./DatepickerField"));
-
-var _Textarea = _interopRequireDefault(require("./Textarea"));
-
-var _QuickSearch = _interopRequireDefault(require("./QuickSearch"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/InputFields/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA","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/js/InputFields/styling.d.ts

@@ -1,26 +0,0 @@
-export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {
-    locked?: boolean;
-    disabled?: boolean;
-    margin?: string;
-}, never>;
-export declare const activeValidationMessageState: import("styled-components").FlattenSimpleInterpolation;
-export declare const tabbedHereStyle: import("styled-components").FlattenSimpleInterpolation;
-declare const InputFieldStyling: import("styled-components").StyledComponent<"input", any, {
-    locked?: boolean;
-    activeValidationMessage?: boolean;
-    activeErrorMessage?: boolean;
-    correctInput?: boolean;
-    active?: boolean;
-    tabbedHere?: boolean;
-    withoutBorder?: boolean;
-    size?: string;
-}, never>;
-declare const ValidationStyling: import("styled-components").FlattenSimpleInterpolation;
-export declare const RequiredStar: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const Warning: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const WarningMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ErrorMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const AutofilledMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
-export { ValidationStyling, InputFieldStyling };
-export declare const StyledIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SearchIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/js/InputFields/styling.js

@@ -1,76 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-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 = void 0;
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _styles = require("../styles");
-
-var _typography = require("../styles/typography");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var InputWrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n  ", ";\n  ", "\n"])), function (props) {
-  return props.locked || props.disabled ? 'cursor: not-allowed;' : '';
-}, function (props) {
-  return props.margin ? "margin: ".concat(props.margin, ";") : '';
-});
-
-exports.InputWrapper = InputWrapper;
-var lockedState = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  box-shadow: inset 0px 0px 0px 1px ", " !important;\n  color: ", " !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_600);
-var activeValidationMessageState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n  -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), _styles.COLORS.warning_400, _styles.COLORS.warning_400, _styles.COLORS.warning_400);
-exports.activeValidationMessageState = activeValidationMessageState;
-var activeErrorMessageState = (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n  -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), _styles.COLORS.critical_400, _styles.COLORS.critical_400, _styles.COLORS.critical_400);
-var activeCorrectInput = (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n  -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n  box-shadow: inset 0px 0px 0px 2px ", ";\n"])), _styles.COLORS.correct_500, _styles.COLORS.correct_500, _styles.COLORS.correct_500);
-var tabbedHereStyle = (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  outline: none;\n  box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1 !important;\n"])));
-exports.tabbedHereStyle = tabbedHereStyle;
-
-var InputFieldStyling = _styledComponents.default.input(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ", "\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  box-sizing: border-box;\n  width: 100%;\n  outline: none;\n  border-radius: 4px;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ", " !important;\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ", " !important;\n  }\n  &:focus {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.error {\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 2px;\n    border-color: #e97116;\n    padding: 0 15px !important;\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.error {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.active {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n"])), function (props) {
-  return props.withoutBorder ? "-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      " : "-webkit-box-shadow: inset 0px 0px 0px 1px ".concat(_styles.COLORS.neutral_400, ";\n      -moz-box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.neutral_400, ";\n      box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.neutral_400, ";");
-}, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), _styles.COLORS.black, function (props) {
-  return props.locked ? lockedState : '';
-}, function (props) {
-  return props.activeValidationMessage ? activeValidationMessageState : '';
-}, function (props) {
-  return props.activeErrorMessage ? activeErrorMessageState : '';
-}, function (props) {
-  return props.correctInput ? activeCorrectInput : '';
-}, function (props) {
-  return props.tabbedHere ? tabbedHereStyle : '';
-}, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.primary_800);
-
-exports.InputFieldStyling = InputFieldStyling;
-var ValidationStyling = (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  &.error-msg {\n    ", "\n    text-align: center;\n    font-weight: 400;\n    box-sizing: border-box;\n  }\n\n  &.error-msg {\n    padding-top: 8px;\n    padding-bottom: 0;\n    ", "\n    font-weight: 700;\n    line-height: 15px;\n  }\n"])), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, '#e76468'));
-exports.ValidationStyling = ValidationStyling;
-
-var RequiredStar = _styledComponents.default.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 28px;\n  line-height: 12px;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n"])), _styles.COLORS.critical_500);
-
-exports.RequiredStar = RequiredStar;
-
-var Warning = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  font-size: 12px;\n  line-height: 140%;\n\n  ", " {\n    font-size: 14px;\n  }\n\n  &.small {\n    font-size: 12px;\n  }\n  &.medium {\n    font-size: 14px;\n  }\n\n  & * {\n    vertical-align: middle;\n    display: inline-block;\n  }\n\n  svg {\n    margin-right: 4px;\n  }\n"])), _styles.BREAKPOINTS.MEDIUM);
-
-exports.Warning = Warning;
-var WarningMessage = (0, _styledComponents.default)(Warning)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), _styles.COLORS.warning_500);
-exports.WarningMessage = WarningMessage;
-var ErrorMessage = (0, _styledComponents.default)(Warning)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), _styles.COLORS.critical_500);
-exports.ErrorMessage = ErrorMessage;
-var AutofilledMessage = (0, _styledComponents.default)(Warning)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), _styles.COLORS.neutral_600);
-exports.AutofilledMessage = AutofilledMessage;
-
-var StyledIcon = _styledComponents.default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  border-radius: 50%;\n"])));
-
-exports.StyledIcon = StyledIcon;
-var SearchIconWrapper = (0, _styledComponents.default)(StyledIcon)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  position: absolute;\n  border-radius: 50%;\n"])));
-exports.SearchIconWrapper = SearchIconWrapper;
-//# sourceMappingURL=styling.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/InputFields/styling.ts"],"names":["InputWrapper","styled","div","props","locked","disabled","margin","lockedState","css","COLORS","neutral_100","neutral_300","neutral_600","activeValidationMessageState","warning_400","activeErrorMessageState","critical_400","activeCorrectInput","correct_500","tabbedHereStyle","InputFieldStyling","input","withoutBorder","neutral_400","ComponentTextStyle","Italic","BREAKPOINTS","MEDIUM","black","activeValidationMessage","activeErrorMessage","correctInput","tabbedHere","primary_800","primary_700","ValidationStyling","Regular","RequiredStar","span","critical_500","Warning","WarningMessage","warning_500","ErrorMessage","AutofilledMessage","StyledIcon","SearchIconWrapper"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAEO,IAAMA,YAAY,GAAGC,0BAAOC,GAAV,2GAErB,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,IAAgBD,KAAK,CAACE,QAAtB,GAAiC,sBAAjC,GAA0D,EAAtE;AAAA,CAFqB,EAGrB,UAACF,KAAD;AAAA,SAAYA,KAAK,CAACG,MAAN,qBAA0BH,KAAK,CAACG,MAAhC,SAA4C,EAAxD;AAAA,CAHqB,CAAlB;;;AAMP,IAAMC,WAAW,OAAGC,qBAAH,0PACKC,eAAOC,WADZ,EAEqBD,eAAOE,WAF5B,EAGNF,eAAOG,WAHD,CAAjB;AAQO,IAAMC,4BAA4B,OAAGL,qBAAH,yNACKC,eAAOK,WADZ,EAEEL,eAAOK,WAFT,EAGHL,eAAOK,WAHJ,CAAlC;;AAKP,IAAMC,uBAAuB,OAAGP,qBAAH,yNACiBC,eAAOO,YADxB,EAEcP,eAAOO,YAFrB,EAGSP,eAAOO,YAHhB,CAA7B;AAKA,IAAMC,kBAAkB,OAAGT,qBAAH,yNACsBC,eAAOS,WAD7B,EAEmBT,eAAOS,WAF1B,EAGcT,eAAOS,WAHrB,CAAxB;AAKO,IAAMC,eAAe,OAAGX,qBAAH,kLAArB;;;AAKP,IAAMY,iBAAiB,GAAGnB,0BAAOoB,KAAV,o6DAgBnB,UAAClB,KAAD;AAAA,SACAA,KAAK,CAACmB,aAAN,oJAKiDb,eAAOc,WALxD,6DAM2Cd,eAAOc,WANlD,wDAOsCd,eAAOc,WAP7C,MADA;AAAA,CAhBmB,EAqCjB,mCAAkBC,+BAAmBC,MAArC,EAA6ChB,eAAOG,WAApD,CArCiB,EAwCnBc,oBAAYC,MAxCO,EA+Cf,mCAAkBH,+BAAmBC,MAArC,EAA6ChB,eAAOG,WAApD,CA/Ce,EAkEZH,eAAOmB,KAlEK,EAoEnB,UAACzB,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,GAAeG,WAAf,GAA6B,EAAzC;AAAA,CApEmB,EAqEnB,UAACJ,KAAD;AAAA,SAAYA,KAAK,CAAC0B,uBAAN,GAAgChB,4BAAhC,GAA+D,EAA3E;AAAA,CArEmB,EAsEnB,UAACV,KAAD;AAAA,SAAYA,KAAK,CAAC2B,kBAAN,GAA2Bf,uBAA3B,GAAqD,EAAjE;AAAA,CAtEmB,EAuEnB,UAACZ,KAAD;AAAA,SAAYA,KAAK,CAAC4B,YAAN,GAAqBd,kBAArB,GAA0C,EAAtD;AAAA,CAvEmB,EAwEnB,UAACd,KAAD;AAAA,SAAYA,KAAK,CAAC6B,UAAN,GAAmBb,eAAnB,GAAqC,EAAjD;AAAA,CAxEmB,EA2ECV,eAAOC,WA3ER,EAgFVD,eAAOE,WAhFG,EAmFyBF,eAAOwB,WAnFhC,EAoFsBxB,eAAOwB,WApF7B,EAqFiBxB,eAAOwB,WArFxB,EAyGyBxB,eAAOyB,WAzGhC,EA0GsBzB,eAAOyB,WA1G7B,EA2GiBzB,eAAOyB,WA3GxB,EA+GyBzB,eAAOwB,WA/GhC,EAgHsBxB,eAAOwB,WAhH7B,EAiHiBxB,eAAOwB,WAjHxB,CAAvB;;;AA6HA,IAAME,iBAAiB,OAAG3B,qBAAH,wTAEjB,qCAAoBgB,+BAAmBY,OAAvC,EAAgD3B,eAAOmB,KAAvD,CAFiB,EAWjB,qCAAoBJ,+BAAmBY,OAAvC,EAAgD,SAAhD,CAXiB,CAAvB;;;AAiBO,IAAMC,YAAY,GAAGpC,0BAAOqC,IAAV,8LACd7B,eAAO8B,YADO,CAAlB;;;;AAQA,IAAMC,OAAO,GAAGvC,0BAAOC,GAAV,iWAIhBwB,oBAAYC,MAJI,CAAb;;;AAwBA,IAAMc,cAAc,GAAG,+BAAOD,OAAP,CAAH,4FAChB/B,eAAOiC,WADS,CAApB;;AAGA,IAAMC,YAAY,GAAG,+BAAOH,OAAP,CAAH,4FACd/B,eAAO8B,YADO,CAAlB;;AAGA,IAAMK,iBAAiB,GAAG,+BAAOJ,OAAP,CAAH,4FACnB/B,eAAOG,WADY,CAAvB;;;AAMA,IAAMiC,UAAU,GAAG5C,0BAAOC,GAAV,kGAAhB;;;AAIA,IAAM4C,iBAAiB,GAAG,+BAAOD,UAAP,CAAH,yHAAvB","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/js/Layouts/index.d.ts

@@ -1,10 +0,0 @@
-export declare const PageWidth: import("styled-components").StyledComponent<"div", any, {
-    useMaxWidth?: boolean;
-    maxWidth?: number;
-}, never>;
-export declare const Columns: import("styled-components").StyledComponent<"section", any, {
-    gap?: string;
-    columns?: string;
-    printColumns?: string;
-}, never>;
-export declare const ContainerMargins: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/js/Layouts/index.js

@@ -1,56 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ContainerMargins = exports.Columns = exports.PageWidth = void 0;
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _styles = require("../styles");
-
-var _templateObject, _templateObject2, _templateObject3;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var GRID = {
-  GAP: {
-    SMALL: '24px',
-    MEDIUM: '32px',
-    LARGE: '40px'
-  },
-  GUTTER: {
-    SMALL: '16px',
-    MEDIUM: '32px',
-    LARGE: '56px'
-  }
-};
-
-var PageWidth = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  margin: 0 ", ";\n\n  ", " {\n    margin: 0 ", ";\n  }\n  ", " {\n    margin: 0 ", ";\n  }\n\n  ", " {\n    max-width: ", ";\n    margin: 0 auto;\n  }\n"])), GRID.GUTTER.SMALL, _styles.BREAKPOINTS.MEDIUM, GRID.GUTTER.MEDIUM, _styles.BREAKPOINTS.LARGE, GRID.GUTTER.LARGE, _styles.BREAKPOINTS.XLARGE, function (props) {
-  return props.useMaxWidth ? props.maxWidth ? 'min(100% - 112px,' + props.maxWidth + 'px)' : 'calc(100% - 112px)' : '1088px';
-});
-
-exports.PageWidth = PageWidth;
-
-var Columns = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  display: grid;\n  grid-gap: ", ";\n  word-break: break-word; /* Prevent long words from breaking the layout \u2013 consider making this rule global */\n\n  ", " {\n    grid-template-columns: ", ";\n    -ms-grid-columns: ", ";\n    grid-gap: ", ";\n  }\n\n  ", " {\n    grid-gap: ", ";\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ", ";\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ", ";\n  }\n"])), function (props) {
-  return props.gap || GRID.GAP.SMALL;
-}, _styles.BREAKPOINTS.MEDIUM, function (props) {
-  return props.columns;
-}, function (props) {
-  return props.columns;
-}, function (props) {
-  return props.gap || GRID.GAP.MEDIUM;
-}, _styles.BREAKPOINTS.LARGE, function (props) {
-  return props.gap || GRID.GAP.LARGE;
-}, GRID.GAP.MEDIUM, function (props) {
-  return props.printColumns || 'none';
-});
-
-exports.Columns = Columns;
-
-var ContainerMargins = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Small devices (portrait tablets, 576px and up) */\n  @media only screen and (min-width: 576px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* Large devices (laptops/desktops, 992px and up) */\n  @media only screen and (min-width: 992px) {\n    margin: 56px;\n    column-gap: 24px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n"])));
-
-exports.ContainerMargins = ContainerMargins;
-//# sourceMappingURL=index.js.map

package/dist/js/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","useMaxWidth","maxWidth","Columns","section","gap","columns","printColumns","ContainerMargins"],"mappings":";;;;;;;AAAA;;AAEA;;;;;;;;AAEA,IAAMA,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;;AAaO,IAAME,SAAS,GAAGC,0BAAOC,GAAV,oPAERR,IAAI,CAACK,MAAL,CAAYH,KAFJ,EAIlBO,oBAAYN,MAJM,EAKNH,IAAI,CAACK,MAAL,CAAYF,MALN,EAOlBM,oBAAYL,KAPM,EAQNJ,IAAI,CAACK,MAAL,CAAYD,KARN,EAWlBK,oBAAYC,MAXM,EAYL,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,WAAN,GAAqBD,KAAK,CAACE,QAAN,GAAiB,sBAAsBF,KAAK,CAACE,QAA5B,GAAuC,KAAxD,GAAgE,oBAArF,GAA6G,QAAzH;AAAA,CAZK,CAAf;;;;AAiBA,IAAMC,OAAO,GAAGP,0BAAOQ,OAAV,snBAGN,UAACJ,KAAD;AAAA,SAAWA,KAAK,CAACK,GAAN,IAAahB,IAAI,CAACC,GAAL,CAASC,KAAjC;AAAA,CAHM,EAMhBO,oBAAYN,MANI,EAOS,UAACQ,KAAD;AAAA,SAAWA,KAAK,CAACM,OAAjB;AAAA,CAPT,EAQI,UAACN,KAAD;AAAA,SAAWA,KAAK,CAACM,OAAjB;AAAA,CARJ,EASJ,UAACN,KAAD;AAAA,SAAWA,KAAK,CAACK,GAAN,IAAahB,IAAI,CAACC,GAAL,CAASE,MAAjC;AAAA,CATI,EAYhBM,oBAAYL,KAZI,EAaJ,UAACO,KAAD;AAAA,SAAWA,KAAK,CAACK,GAAN,IAAahB,IAAI,CAACC,GAAL,CAASG,KAAjC;AAAA,CAbI,EAoBCJ,IAAI,CAACC,GAAL,CAASE,MApBV,EA0BS,UAACQ,KAAD;AAAA,SAAWA,KAAK,CAACO,YAAN,IAAsB,MAAjC;AAAA,CA1BT,CAAb;;;;AA8BA,IAAMC,gBAAgB,GAAGZ,0BAAOC,GAAV,o0BAAtB","sourcesContent":["import styled from 'styled-components';\n\nimport { BREAKPOINTS } from '../styles';\n\nconst GRID = {\n  GAP: {\n    SMALL: '24px',\n    MEDIUM: '32px',\n    LARGE: '40px',\n  },\n  GUTTER: {\n    SMALL: '16px',\n    MEDIUM: '32px',\n    LARGE: '56px',\n  },\n};\n\nexport const PageWidth = styled.div<{ useMaxWidth?: boolean; maxWidth?: number }>`\n  display: block;\n  margin: 0 ${GRID.GUTTER.SMALL};\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 ${GRID.GUTTER.MEDIUM};\n  }\n  ${BREAKPOINTS.LARGE} {\n    margin: 0 ${GRID.GUTTER.LARGE};\n  }\n\n  ${BREAKPOINTS.XLARGE} {\n    max-width: ${(props) => (props.useMaxWidth ? (props.maxWidth ? 'min(100% - 112px,' + props.maxWidth + 'px)' : 'calc(100% - 112px)') : '1088px')};\n    margin: 0 auto;\n  }\n`;\n\nexport const Columns = styled.section<{ gap?: string; columns?: string; printColumns?: string }>`\n  width: 100%;\n  display: grid;\n  grid-gap: ${(props) => props.gap || GRID.GAP.SMALL};\n  word-break: break-word; /* Prevent long words from breaking the layout – consider making this rule global */\n\n  ${BREAKPOINTS.MEDIUM} {\n    grid-template-columns: ${(props) => props.columns};\n    -ms-grid-columns: ${(props) => props.columns};\n    grid-gap: ${(props) => props.gap || GRID.GAP.MEDIUM};\n  }\n\n  ${BREAKPOINTS.LARGE} {\n    grid-gap: ${(props) => props.gap || GRID.GAP.LARGE};\n  }\n\n  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n    display: -ms-grid;\n\n    > *:not(:first-child) {\n      margin-left: ${GRID.GAP.MEDIUM};\n    }\n  }\n\n  @media print {\n    grid-gap: 0;\n    grid-template-columns: ${(props) => props.printColumns || 'none'};\n  }\n`;\n\nexport const ContainerMargins = styled.div`\n  /* X small devices (mobile phones, 320px and up) */\n  @media only screen and (min-width: 320px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Small devices (portrait tablets, 576px and up) */\n  @media only screen and (min-width: 576px) {\n    margin: 16px;\n    column-gap: 16px;\n  }\n\n  /* Medium devices (landscape tablets, 768px and up) */\n  @media only screen and (min-width: 768px) {\n    margin: 32px;\n    column-gap: 32px;\n  }\n\n  /* Large devices (laptops/desktops, 992px and up) */\n  @media only screen and (min-width: 992px) {\n    margin: 56px;\n    column-gap: 24px;\n  }\n\n  /* X large devices (laptops/desktops, 1200px and up) */\n  @media only screen and (min-width: 1200px) {\n    margin: 56px;\n    column-gap: 40px;\n  }\n`;\n"],"file":"index.js"}

package/dist/js/List/ListRow.js

@@ -1,136 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var React = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _styles = require("../styles");
-
-var _typography = require("../styles/typography");
-
-var _Tooltips = require("../Tooltips");
-
-var _Dropdown = require("../Dropdown");
-
-var _icons = require("../icons");
-
-var _types = require("../types");
-
-var _zIndexes = require("../styles/z-indexes");
-
-var _templateObject;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var Row = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  position: relative;\n\n  color: ", ";\n  background-color: ", ";\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    box-shadow: none;\n    z-index: ", ";\n  }\n\n  &.interactive:focus {\n    outline: none;\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    z-index: ", ";\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ", ";\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ", "\n  }\n\n  .list-item-note {\n    color: ", ";\n    word-break: initial;\n    ", "\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ", ";\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_600, _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _zIndexes.Z_INDEXES.active, _zIndexes.Z_INDEXES.focus, _styles.COLORS.neutral_300, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null), (0, _typography.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), _styles.COLORS.neutral_600, (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _styles.COLORS.neutral_600);
-
-var ListRow = function ListRow(_ref) {
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'normal' : _ref$variant,
-      icon = _ref.icon,
-      mainText = _ref.mainText,
-      secondaryText = _ref.secondaryText,
-      dropdown = _ref.dropdown,
-      note = _ref.note,
-      noteTooltip = _ref.noteTooltip,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      action = _ref.action;
-
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      inAction = _React$useState2[0],
-      setInAction = _React$useState2[1];
-
-  var handleKeyPress = function handleKeyPress(e) {
-    if (e.key === 'Enter') {
-      action && action();
-    }
-  };
-
-  var rowClassName = (inAction ? 'in-action ' : '').concat(disabled ? 'disabled ' : '').concat(!!action ? 'interactive ' : '').concat('list-item-row ').concat("".concat(variant, " ")).concat("".concat(size));
-  return /*#__PURE__*/React.createElement(Row, {
-    tabIndex: !!action && !disabled ? 0 : undefined,
-    className: rowClassName,
-    onKeyPress: function onKeyPress(e) {
-      return !disabled && handleKeyPress(e);
-    },
-    onClick: function onClick(e) {
-      !disabled && action && action();
-    },
-    "data-hj-suppress": true
-  }, !!icon && /*#__PURE__*/React.createElement("div", {
-    className: 'list-item-icon'
-  }, icon), /*#__PURE__*/React.createElement("div", {
-    className: 'list-item-content'
-  }, /*#__PURE__*/React.createElement("div", {
-    className: 'list-item-main-text'
-  }, mainText), !!secondaryText && /*#__PURE__*/React.createElement("div", {
-    className: 'list-item-secondary-text'
-  }, secondaryText)), !!note && /*#__PURE__*/React.createElement(React.Fragment, null, !!noteTooltip && /*#__PURE__*/React.createElement("div", {
-    className: 'list-item-note with-tooltip'
-  }, /*#__PURE__*/React.createElement(_Tooltips.TooltipWrapper, {
-    label: noteTooltip,
-    size: size === _types.Size.Large ? _types.Size.Medium : size === _types.Size.Small ? _types.Size.XSmall : _types.Size.Small,
-    position: 'top',
-    withArrow: true
-  }, note)), !noteTooltip && /*#__PURE__*/React.createElement("div", {
-    className: 'list-item-note'
-  }, note)), !!dropdown && /*#__PURE__*/React.createElement("div", {
-    className: 'list-item-actions',
-    onMouseEnter: function onMouseEnter() {
-      return setInAction(!(dropdown !== null && dropdown !== void 0 && dropdown.disabled));
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setInAction(false);
-    }
-  }, /*#__PURE__*/React.createElement(_Dropdown.DropdownButton, _extends({}, dropdown, {
-    disabled: disabled || dropdown.disabled,
-    icon: variant === 'overlay' ? /*#__PURE__*/React.createElement(_icons.SystemIcons.ArrowDropDown, null) : /*#__PURE__*/React.createElement(_icons.SystemIcons.MoreVertical, null)
-  }))));
-};
-
-ListRow.propTypes = {
-  variant: _propTypes.default.oneOf(['normal', 'overlay']),
-  icon: _propTypes.default.node,
-  mainText: _propTypes.default.string.isRequired,
-  secondaryText: _propTypes.default.string,
-  note: _propTypes.default.string,
-  noteTooltip: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
-  action: _propTypes.default.func
-};
-var _default = ListRow;
-exports.default = _default;
-//# sourceMappingURL=ListRow.js.map

package/dist/js/List/ListRow.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/List/ListRow.tsx"],"names":["Row","styled","div","COLORS","neutral_100","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focus","neutral_300","ComponentTextStyle","Regular","ListRow","size","Size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","React","useState","inAction","setInAction","handleKeyPress","e","key","rowClassName","concat","undefined","Large","Small","XSmall"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle} from '../styles';\n\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nconst Row = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  position: relative;\n\n  color: ${COLORS.neutral_600};\n  background-color: ${COLORS.white};\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    box-shadow: none;\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.interactive:focus {\n    outline: none;\n    box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    z-index: ${Z_INDEXES.focus};\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note {\n    color: ${COLORS.neutral_600};\n    word-break: initial;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ${COLORS.neutral_600};\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n`;\n\n\ntype Props = {\n  size?: Size;\n  variant?: 'normal' | 'overlay';\n  icon?: React.ReactNode;\n  mainText: string;\n  secondaryText?: string;\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n  note?: string;\n  noteTooltip?: string;\n  disabled?: boolean;\n  action?: () => void;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n                                                   size = Size.Medium,\n                                                   variant = 'normal',\n                                                   icon,\n                                                   mainText,\n                                                   secondaryText,\n                                                   dropdown,\n                                                   note,\n                                                   noteTooltip,\n                                                   disabled = false,\n                                                   action\n                                                 }: Props) => {\n\n  const [inAction, setInAction] = React.useState<Boolean>(false);\n\n  const handleKeyPress = (e: any) => {\n    if (e.key === 'Enter') {\n      action && action()\n    }\n  }\n\n  const rowClassName = (inAction ? 'in-action ' : '')\n    .concat(disabled ? 'disabled ' : '')\n    .concat(!!action ? 'interactive ' : '')\n    .concat('list-item-row ')\n    .concat(`${variant} `)\n    .concat(`${size}`);\n\n  return (\n    <Row tabIndex={!!action && !disabled ? 0 : undefined}\n         className={rowClassName}\n         onKeyPress={(e) => !disabled && handleKeyPress(e)}\n         onClick={e => {\n           !disabled && action && action();\n         }}\n         data-hj-suppress>\n      {\n        !!icon &&\n        <div className={'list-item-icon'}>{icon}</div>\n      }\n      <div className={'list-item-content'}>\n        <div className={'list-item-main-text'}>{mainText}</div>\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n      </div>\n      {\n        !!note &&\n        <>\n          {\n            !!noteTooltip &&\n            <div className={'list-item-note with-tooltip'}>\n              <TooltipWrapper label={noteTooltip}\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n                              position={'top'}\n                              withArrow={true}>\n                {note}\n              </TooltipWrapper>\n            </div>\n          }\n          {\n            !noteTooltip &&\n            <div className={'list-item-note'}>\n              {note}\n            </div>\n          }\n        </>\n      }\n      {\n        !!dropdown &&\n        <div className={'list-item-actions'}\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\n             onMouseLeave={() => setInAction(false)}>\n          <DropdownButton {...dropdown}\n                          disabled={disabled || dropdown.disabled}\n                          icon={variant === 'overlay'\n                            ? <SystemIcons.ArrowDropDown/>\n                            : <SystemIcons.MoreVertical/>}\n          />\n        </div>\n      }\n    </Row>\n  );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.js"}