@laerdal/life-react-components 1.2.2-dev.8 → 1.3.1-dev.1.full

package/dist/js/GlobalNavigationBar/Logo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","Link","props","color","BREAKPOINTS","MEDIUM","LogoContainer","styled","div","Name","span","COLORS","black","noSizeChangeOnMobile","ComponentTextStyle","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","betaTagBackgroundColor","betaTagColor","e","preventDefault"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,UAAU,GAAG,+BAAOC,oBAAP,CAAH,iVAWH,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAjB;AAAA,CAXG,EAYVC,oBAAYC,MAZF,CAAhB;;AAmBA,IAAMC,aAAa,GAAGC,0BAAOC,GAAV,uYAQfJ,oBAAYC,MARG,CAAnB;;AAmBA,IAAMI,IAAI,GAAGF,0BAAOG,IAAV,8UAGiB,UAACR,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAAjC;AAAA,CAHjB,EAMN,UAACV,KAAD;AAAA,SAAWA,KAAK,CAACW,oBAAN,GACH,mCAAkBC,2BAAmBC,OAArC,EAA8Cb,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAApE,CADG,GAEH,oCAAmBE,2BAAmBC,OAAtC,EAA+Cb,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAArE,CAFR;AAAA,CANM,EAaNR,oBAAYC,MAbN,EAgBJ,UAACH,KAAD;AAAA,SAAW,mCAAkBY,2BAAmBC,OAArC,EAA8Cb,KAAK,CAACC,KAAN,IAAeQ,eAAOC,KAApE,CAAX;AAAA,CAhBI,CAAV;;AAoBA,IAAMI,OAAO,GAAGT,0BAAOG,IAAV,0NACS,UAACR,KAAD;AAAA,SAAWA,KAAK,CAACe,eAAN,IAAyBN,eAAOO,WAA3C;AAAA,CADT,EAQT,UAAChB,KAAD;AAAA,SAAW,oCAAmBY,2BAAmBK,aAAtC,EAAqDjB,KAAK,CAACC,KAAN,IAAeQ,eAAOS,KAA3E,CAAX;AAAA,CARS,CAAb;;AAsBA,IAAMC,IAAI,GAAG,SAAPA,IAAO,OAAqJ;AAAA,MAAlJC,IAAkJ,QAAlJA,IAAkJ;AAAA,MAA5IC,WAA4I,QAA5IA,WAA4I;AAAA,MAA/HC,QAA+H,QAA/HA,OAA+H;AAAA,MAAtHC,EAAsH,QAAtHA,EAAsH;AAAA,MAAlHtB,KAAkH,QAAlHA,KAAkH;AAAA,MAA3GU,oBAA2G,QAA3GA,oBAA2G;AAAA,MAArFa,sBAAqF,QAArFA,sBAAqF;AAAA,MAA7DC,YAA6D,QAA7DA,YAA6D;AAChK,sBACE,oBAAC,aAAD,qBACE,oBAAC,UAAD;AACE,IAAA,EAAE,EAAEF,EAAE,IAAI,GADZ;AAEE,IAAA,WAAW,EAAE,qBAACG,CAAD;AAAA,aAAYA,CAAC,CAACC,cAAF,EAAZ;AAAA,KAFf;AAGE,IAAA,OAAO,EAAE,mBAAM;AACb,UAAIL,QAAJ,EAAa;AACXA,QAAAA,QAAO;AACR;AACF,KAPH;AAQE,IAAA,KAAK,EAAErB;AART,KASGA,KAAK,KAAKQ,eAAOS,KAAjB,gBAAyB,oBAAC,wBAAD,OAAzB,gBAAgD,oBAAC,mBAAD,OATnD,eAUE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEjB,KAAb;AAAoB,IAAA,oBAAoB,EAAEU,oBAAoB,IAAI;AAAlE,KACGS,IADH,CAVF,EAaGC,WAAW,iBACV,oBAAC,OAAD;AAAS,IAAA,eAAe,EAAEG,sBAA1B;AAAkD,IAAA,KAAK,EAAEC;AAAzD,YAdJ,CADF,CADF;AAuBD,CAxBD;;;AAVEL,EAAAA,I;AACAC,EAAAA,W;AACAC,EAAAA,O;AACAC,EAAAA,E;AACAtB,EAAAA,K;AACAU,EAAAA,oB;AACAa,EAAAA,sB;AACAC,EAAAA,Y;;eA6BaN,I","sourcesContent":["import * as React from 'react';\nimport {Link} from 'react-router-dom';\nimport styled from 'styled-components';\nimport {LaerdalLogo, LaerdalWhiteLogo} from '../assets';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../styles';\nimport {ComponentMStyling, ComponentXSStyling} from '../styles/typography';\n\nconst StyledLink = styled(Link)<{ color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst Name = styled.span<{ color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.color || COLORS.black};\n  letter-spacing: -0.02em;\n\n  ${(props) => props.noSizeChangeOnMobile\n          ? ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)\n          : ComponentXSStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}\n  \n  font-weight: 300 !important;\n  line-height: 24px !important;\n  \n  ${BREAKPOINTS.MEDIUM} {\n    margin-left: 12px;\n    padding-left: 12px;\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.color || COLORS.black)}\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={(e: any) => e.preventDefault()}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/Logo.tsx"],"names":["StyledLink","Link","props","$color","BREAKPOINTS","MEDIUM","LogoContainer","styled","div","Name","span","COLORS","black","noSizeChangeOnMobile","ComponentTextStyle","Regular","BetaTag","backgroundColor","accent2_500","UppercaseBold","white","Logo","name","showBetaTag","onClick","to","color","betaTagBackgroundColor","betaTagColor","e","preventDefault"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,UAAU,GAAG,+BAAOC,oBAAP,CAAH,iVAWH,UAACC,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAjB;AAAA,CAXG,EAYVC,oBAAYC,MAZF,CAAhB;;AAmBA,IAAMC,aAAa,GAAGC,0BAAOC,GAAV,uYAQfJ,oBAAYC,MARG,CAAnB;;AAmBA,IAAMI,IAAI,GAAGF,0BAAOG,IAAV,0UAGiB,UAACR,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAN,IAAgBQ,eAAOC,KAAlC;AAAA,CAHjB,EAMN,UAACV,KAAD;AAAA,SACAA,KAAK,CAACW,oBAAN,GACI,mCAAkBC,2BAAmBC,OAArC,EAA8Cb,KAAK,CAACC,MAAN,IAAgBQ,eAAOC,KAArE,CADJ,GAEI,oCAAmBE,2BAAmBC,OAAtC,EAA+Cb,KAAK,CAACC,MAAN,IAAgBQ,eAAOC,KAAtE,CAHJ;AAAA,CANM,EAcNR,oBAAYC,MAdN,EAiBJ,UAACH,KAAD;AAAA,SAAW,mCAAkBY,2BAAmBC,OAArC,EAA8Cb,KAAK,CAACC,MAAN,IAAgBQ,eAAOC,KAArE,CAAX;AAAA,CAjBI,CAAV;;AAqBA,IAAMI,OAAO,GAAGT,0BAAOG,IAAV,0NACS,UAACR,KAAD;AAAA,SAAWA,KAAK,CAACe,eAAN,IAAyBN,eAAOO,WAA3C;AAAA,CADT,EAQT,UAAChB,KAAD;AAAA,SAAW,oCAAmBY,2BAAmBK,aAAtC,EAAqDjB,KAAK,CAACC,MAAN,IAAgBQ,eAAOS,KAA5E,CAAX;AAAA,CARS,CAAb;;AAsBA,IAAMC,IAAI,GAAG,SAAPA,IAAO,OAAqJ;AAAA,MAAlJC,IAAkJ,QAAlJA,IAAkJ;AAAA,MAA5IC,WAA4I,QAA5IA,WAA4I;AAAA,MAA/HC,QAA+H,QAA/HA,OAA+H;AAAA,MAAtHC,EAAsH,QAAtHA,EAAsH;AAAA,MAAlHC,KAAkH,QAAlHA,KAAkH;AAAA,MAA3Gb,oBAA2G,QAA3GA,oBAA2G;AAAA,MAArFc,sBAAqF,QAArFA,sBAAqF;AAAA,MAA7DC,YAA6D,QAA7DA,YAA6D;AAChK,sBACE,oBAAC,aAAD,qBACE,oBAAC,UAAD;AACE,IAAA,EAAE,EAAEH,EAAE,IAAI,GADZ;AAEE,IAAA,WAAW,EAAE,qBAACI,CAAD;AAAA,aAAYA,CAAC,CAACC,cAAF,EAAZ;AAAA,KAFf;AAGE,IAAA,OAAO,EAAE,mBAAM;AACb,UAAIN,QAAJ,EAAa;AACXA,QAAAA,QAAO;AACR;AACF,KAPH;AAQE,IAAA,MAAM,EAAEE;AARV,KASGA,KAAK,KAAKf,eAAOS,KAAjB,gBAAyB,oBAAC,wBAAD,OAAzB,gBAAgD,oBAAC,mBAAD,OATnD,eAUE,oBAAC,IAAD;AAAM,IAAA,MAAM,EAAEM,KAAd;AAAqB,IAAA,oBAAoB,EAAEb,oBAAoB,IAAI;AAAnE,KACGS,IADH,CAVF,EAaGC,WAAW,iBACV,oBAAC,OAAD;AAAS,IAAA,eAAe,EAAEI,sBAA1B;AAAkD,IAAA,MAAM,EAAEC;AAA1D,YAdJ,CADF,CADF;AAuBD,CAxBD;;;AAVEN,EAAAA,I;AACAC,EAAAA,W;AACAC,EAAAA,O;AACAC,EAAAA,E;AACAC,EAAAA,K;AACAb,EAAAA,oB;AACAc,EAAAA,sB;AACAC,EAAAA,Y;;eA6BaP,I","sourcesContent":["import * as React from 'react';\nimport { Link } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { LaerdalLogo, LaerdalWhiteLogo } from '../assets';\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../styles';\nimport { ComponentMStyling, ComponentXSStyling } from '../styles/typography';\n\nconst StyledLink = styled(Link)<{ $color?: string }>`\n  text-align: center;\n  text-decoration: none;\n  display: flex;\n  align-items: center;\n  &:focus-within {\n    outline: none;\n  }\n  svg {\n    width: 66px;\n    height: 36px;\n    color: ${(props) => props.$color};\n    ${BREAKPOINTS.MEDIUM} {\n      width: 88px;\n      height: 48px;\n    }\n  }\n`;\n\nconst LogoContainer = styled.div`\n  display: flex;\n  align-items: center;\n  height: 40px;\n  margin-right: 16px;\n  box-sizing: border-box;\n  padding: 24px 0;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 8px;\n    margin-bottom: 7px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 0px 8px #2e7fa1, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    outline: none;\n  }\n`;\n\nconst Name = styled.span<{ $color?: string; noSizeChangeOnMobile: boolean }>`\n  margin-left: 8px;\n  padding-left: 8px;\n  border-left: 1px solid ${(props) => props.$color || COLORS.black};\n  letter-spacing: -0.02em;\n\n  ${(props) =>\n    props.noSizeChangeOnMobile\n      ? ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)\n      : ComponentXSStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n\n  font-weight: 300 !important;\n  line-height: 24px !important;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-left: 12px;\n    padding-left: 12px;\n    ${(props) => ComponentMStyling(ComponentTextStyle.Regular, props.$color || COLORS.black)}\n  }\n`;\n\nconst BetaTag = styled.span<{ backgroundColor?: string; $color?: string }>`\n  background-color: ${(props) => props.backgroundColor || COLORS.accent2_500};\n  padding: 4px 8px;\n  margin-left: 8px;\n  margin-top: 2px;\n  border-left: none;\n  border-radius: 2px;\n\n  ${(props) => ComponentXSStyling(ComponentTextStyle.UppercaseBold, props.$color || COLORS.white)}\n`;\n\ntype LogoProps = {\n  name: string;\n  showBetaTag?: boolean;\n  onClick?: () => void;\n  to?: string;\n  color?: string;\n  noSizeChangeOnMobile?: boolean;\n  betaTagBackgroundColor?: string;\n  betaTagColor?: string;\n};\n\nconst Logo = ({ name, showBetaTag, onClick, to, color, noSizeChangeOnMobile, betaTagBackgroundColor, betaTagColor }: LogoProps): React.ReactElement<LogoProps> => {\n  return (\n    <LogoContainer>\n      <StyledLink\n        to={to || '/'}\n        onMouseDown={(e: any) => e.preventDefault()}\n        onClick={() => {\n          if (onClick) {\n            onClick();\n          }\n        }}\n        $color={color}>\n        {color === COLORS.white ? <LaerdalWhiteLogo /> : <LaerdalLogo />}\n        <Name $color={color} noSizeChangeOnMobile={noSizeChangeOnMobile || false}>\n          {name}\n        </Name>\n        {showBetaTag && (\n          <BetaTag backgroundColor={betaTagBackgroundColor} $color={betaTagColor}>\n            BETA\n          </BetaTag>\n        )}\n      </StyledLink>\n    </LogoContainer>\n  );\n};\n\nexport default Logo;\n"],"file":"Logo.js"}

package/dist/js/HyperLink/HyperLink.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-interface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     id: string;
     variant: 'default' | 'inverted';
     href: string;
@@ -8,5 +8,5 @@ interface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     children?: any;
     className?: string;
 }
-declare const HyperLink: React.FunctionComponent<Props>;
+declare const HyperLink: React.FunctionComponent<HyperlinkProps>;
 export default HyperLink;

package/dist/js/HyperLink/HyperLink.js

@@ -15,6 +15,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _styling = require("./styling");
 
+var _excluded = ["children", "target", "variant"];
+
 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); }
@@ -23,6 +25,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 var StyledLink = _styledComponents.default.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), function (props) {
@@ -32,22 +40,18 @@ var StyledLink = _styledComponents.default.a(_templateObject || (_templateObject
 });
 
 var HyperLink = function HyperLink(_ref) {
-  var id = _ref.id,
-      className = _ref.className,
-      variant = _ref.variant,
-      href = _ref.href,
-      margin = _ref.margin,
-      children = _ref.children,
-      target = _ref.target;
-  return /*#__PURE__*/React.createElement(StyledLink, {
-    id: id,
-    className: className,
+  var children = _ref.children,
+      _ref$target = _ref.target,
+      target = _ref$target === void 0 ? '_blank' : _ref$target,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(StyledLink, _extends({}, props, {
     variant: variant,
-    href: href,
-    target: target || "_blank",
-    rel: "noopener noreferrer",
-    margin: margin
-  }, children);
+    target: target,
+    rel: "noopener noreferrer"
+  }), children);
 };
 
 HyperLink.propTypes = {

package/dist/js/HyperLink/HyperLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/HyperLink/HyperLink.tsx"],"names":["StyledLink","styled","a","props","variant","invertedStyle","defaultStyle","margin","HyperLink","id","className","href","children","target","disabled"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,UAAU,GAAGC,0BAAOC,CAAV,wFAIZ,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,OAAN,KAAkB,UAAlB,GAA+BC,sBAA/B,GAA+CC,qBAA3D;AAAA,CAJY,EAKZ,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACI,MAAN,qBAA0BJ,KAAK,CAACI,MAAhC,SAA4C,EAAxD;AAAA,CALY,CAAhB;;AAkBA,IAAMC,SAAyC,GAAG,SAA5CA,SAA4C,OAAuE;AAAA,MAApEC,EAAoE,QAApEA,EAAoE;AAAA,MAAhEC,SAAgE,QAAhEA,SAAgE;AAAA,MAArDN,OAAqD,QAArDA,OAAqD;AAAA,MAA5CO,IAA4C,QAA5CA,IAA4C;AAAA,MAAtCJ,MAAsC,QAAtCA,MAAsC;AAAA,MAA9BK,QAA8B,QAA9BA,QAA8B;AAAA,MAApBC,MAAoB,QAApBA,MAAoB;AACvH,sBACE,oBAAC,UAAD;AAAY,IAAA,EAAE,EAAEJ,EAAhB;AAAoB,IAAA,SAAS,EAAEC,SAA/B;AAA0C,IAAA,OAAO,EAAEN,OAAnD;AAA4D,IAAA,IAAI,EAAEO,IAAlE;AAAwE,IAAA,MAAM,EAAEE,MAAM,IAAI,QAA1F;AAAoG,IAAA,GAAG,EAAC,qBAAxG;AAA8H,IAAA,MAAM,EAAEN;AAAtI,KACGK,QADH,CADF;AAKD,CAND;;;AATEH,EAAAA,E;AACAL,EAAAA,O,4BAAS,S,EAAY,U;AACrBO,EAAAA,I;AACAG,EAAAA,Q;AACAP,EAAAA,M;AACAK,EAAAA,Q;AACAF,EAAAA,S;;eAWaF,S","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nconst StyledLink = styled.a<{\n  variant: 'default' | 'inverted';\n  margin?: string;\n}>`\n  ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\ninterface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement>{\n  id: string;\n  variant: 'default' | 'inverted';\n  href: string;\n  disabled?: boolean;\n  margin?: string;\n  children?: any;\n  className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<Props> = ({ id, className, variant, href, margin, children, target }: Props) => {\n  return (\n    <StyledLink id={id} className={className} variant={variant} href={href} target={target || \"_blank\"} rel=\"noopener noreferrer\" margin={margin}>\n      {children}\n    </StyledLink>\n  );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.js"}
+{"version":3,"sources":["../../../src/HyperLink/HyperLink.tsx"],"names":["StyledLink","styled","a","props","variant","invertedStyle","defaultStyle","margin","HyperLink","children","target","id","href","disabled","className"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,UAAU,GAAGC,0BAAOC,CAAV,wFAIZ,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,OAAN,KAAkB,UAAlB,GAA+BC,sBAA/B,GAA+CC,qBAA3D;AAAA,CAJY,EAKZ,UAACH,KAAD;AAAA,SAAYA,KAAK,CAACI,MAAN,qBAA0BJ,KAAK,CAACI,MAAhC,SAA4C,EAAxD;AAAA,CALY,CAAhB;;AAkBA,IAAMC,SAAkD,GAAG,SAArDA,SAAqD,OAAoF;AAAA,MAAjFC,QAAiF,QAAjFA,QAAiF;AAAA,yBAAvEC,MAAuE;AAAA,MAAvEA,MAAuE,4BAA9D,QAA8D;AAAA,0BAApDN,OAAoD;AAAA,MAApDA,OAAoD,6BAA1C,SAA0C;AAAA,MAA5BD,KAA4B;;AAC7I,sBACE,oBAAC,UAAD,eAAgBA,KAAhB;AAAuB,IAAA,OAAO,EAAEC,OAAhC;AAAyC,IAAA,MAAM,EAAEM,MAAjD;AAAyD,IAAA,GAAG,EAAC;AAA7D,MACGD,QADH,CADF;AAKD,CAND;;;AATEE,EAAAA,E;AACAP,EAAAA,O,4BAAS,S,EAAY,U;AACrBQ,EAAAA,I;AACAC,EAAAA,Q;AACAN,EAAAA,M;AACAE,EAAAA,Q;AACAK,EAAAA,S;;eAWaN,S","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { defaultStyle, invertedStyle } from './styling';\n\nconst StyledLink = styled.a<{\n  variant: 'default' | 'inverted';\n  margin?: string;\n}>`\n  ${(props) => (props.variant === 'inverted' ? invertedStyle : defaultStyle)}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nexport interface HyperlinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  id: string;\n  variant: 'default' | 'inverted';\n  href: string;\n  disabled?: boolean;\n  margin?: string;\n  children?: any;\n  className?: string;\n}\n\nconst HyperLink: React.FunctionComponent<HyperlinkProps> = ({ children, target = '_blank', variant = 'default', ...props }: HyperlinkProps) => {\n  return (\n    <StyledLink {...props} variant={variant} target={target} rel=\"noopener noreferrer\">\n      {children}\n    </StyledLink>\n  );\n};\n\nexport default HyperLink;\n"],"file":"HyperLink.js"}

package/dist/js/InputFields/Checkbox.js

@@ -31,7 +31,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var StyledCheckBox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n\n  ", "\n  cursor: pointer;\n\n  color: ", ";\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ", "\n  }\n\n  &.medium {\n    ", "\n  }\n\n  &.large {\n    ", "\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .icon {\n      background-color: ", ";\n      box-shadow: 0 0 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .icon {\n      background: ", ";\n      box-shadow: none;\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .icon,\n    .label {\n      pointer-events: none;\n    }\n\n    .icon{\n      background-color: ", ";\n    }\n\n    .icon svg {\n      color: ", ";\n    }\n  }\n"])), function (props) {
+var StyledCheckBox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n\n  color: ", ";\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ", "\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .checkbox-icon {\n      background-color: ", ";\n      box-shadow: 0 0 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .checkbox-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .checkbox-icon {\n      background: ", ";\n      box-shadow: none;\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon{\n      background-color: ", ";\n    }\n\n    .checkbox-icon svg {\n      color: ", ";\n    }\n  }\n"])), function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 }, _styles.COLORS.black, function (props) {
   return props.selected ? _styles.COLORS.primary_500 : props.showWarning ? _styles.COLORS.warning_400 : _styles.COLORS.neutral_600;
@@ -49,7 +49,8 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       disabled = _ref.disabled,
       margin = _ref.margin,
       size = _ref.size,
-      semiSelected = _ref.semiSelected;
+      semiSelected = _ref.semiSelected,
+      children = _ref.children;
 
   var onKeyPress = function onKeyPress(e) {
     if (e.keyCode === 13 && !disabled) {
@@ -82,7 +83,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: 'icon'
+    className: 'checkbox-icon'
   }, selected ? /*#__PURE__*/React.createElement(_SystemIcons.CheckboxOn, {
     className: iconPointerEventsTransparent ? "pointerTransparent" : "",
     size: "24px"
@@ -93,9 +94,12 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: iconPointerEventsTransparent ? "pointerTransparent" : "",
     size: "24px"
   })), label && /*#__PURE__*/React.createElement("label", {
-    className: 'label',
+    className: 'checkbox-label',
     htmlFor: id
-  }, label));
+  }, label), !label && /*#__PURE__*/React.createElement("label", {
+    className: 'checkbox-label',
+    htmlFor: id
+  }, children));
 });
 Checkbox.propTypes = {
   id: _propTypes.default.string.isRequired,

package/dist/js/InputFields/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","onKeyPress","e","keyCode","handleClick","Size","Medium","toString","toLowerCase","concat","preventDefault"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,cAAc,GAAGC,0BAAOC,GAAV,y7CAQhB,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAjD;AAAA,CARW,EAWTC,eAAOC,KAXE,EA4BL,UAAAH,KAAK;AAAA,SAAKA,KAAK,CAACI,QAAN,GAAiBF,eAAOG,WAAxB,GAAsCL,KAAK,CAACM,WAAN,GAAoBJ,eAAOK,WAA3B,GAAyCL,eAAOM,WAA3F;AAAA,CA5BA,EAsCd,mCAAkBC,2BAAmBC,OAArC,EAA8CR,eAAOC,KAArD,CAtCc,EA0Cd,mCAAkBM,2BAAmBC,OAArC,EAA8CR,eAAOC,KAArD,CA1Cc,EA8Cd,mCAAkBM,2BAAmBC,OAArC,EAA8CR,eAAOC,KAArD,CA9Cc,EAqDMD,eAAOS,KArDb,EAsDQT,eAAOG,WAtDf,EAyDHH,eAAOM,WAzDJ,EAgEMN,eAAOU,UAhEb,EAmEHV,eAAOW,WAnEJ,EA0EAX,eAAOY,WA1EP,EA8EHZ,eAAOa,WA9EJ,EAuFPb,eAAOc,WAvFA,EA+FMd,eAAOS,KA/Fb,EAmGLT,eAAOc,WAnGF,CAApB;;AAqHA,IAAMC,QAAQ,gBAAGC,KAAK,CAACC,UAAN,CAAwC,gBAWMC,GAXN,EAWc;AAAA;;AAAA,MAVhBC,EAUgB,QAVhBA,EAUgB;AAAA,MAThBjB,QASgB,QAThBA,QASgB;AAAA,MARhBkB,MAQgB,QARhBA,MAQgB;AAAA,MAPhBC,KAOgB,QAPhBA,KAOgB;AAAA,MANhBjB,WAMgB,QANhBA,WAMgB;AAAA,MALhBkB,4BAKgB,QALhBA,4BAKgB;AAAA,MAJhBC,QAIgB,QAJhBA,QAIgB;AAAA,MAHhBxB,MAGgB,QAHhBA,MAGgB;AAAA,MAFhByB,IAEgB,QAFhBA,IAEgB;AAAA,MADhBC,YACgB,QADhBA,YACgB;;AACrE,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,CAAD,EAAY;AAC7B,QAAIA,CAAC,CAACC,OAAF,KAAc,EAAd,IAAoB,CAACL,QAAzB,EAAmC;AACjCH,MAAAA,MAAM,CAAC,CAAClB,QAAF,CAAN;AACD;AACF,GAJD;;AAMA,MAAM2B,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIN,QAAJ,EAAc;AACZ;AACD;;AACDH,IAAAA,MAAM,CAAC,CAAClB,QAAF,CAAN;AACD,GALD;;AAOAsB,EAAAA,IAAI,YAAGA,IAAH,yCAAWM,YAAKC,MAApB;AAEA,sBACE,oBAAC,cAAD;AAAgB,IAAA,GAAG,EAAEZ,EAArB;AACgB,IAAA,GAAG,EAAED,GADrB;AAEgB,IAAA,QAAQ,EAAEK,QAF1B;AAGgB,IAAA,SAAS,EAAEC,IAAI,CAACQ,QAAL,GAAgBC,WAAhB,GAA8BC,MAA9B,CAAqCX,QAAQ,GAAG,WAAH,GAAiB,EAA9D,CAH3B;AAIgB,IAAA,QAAQ,EAAErB,QAJ1B;AAKgB,IAAA,QAAQ,EAAEqB,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAL1C;AAMgB,IAAA,WAAW,EAAEnB,WAN7B;AAOgB,IAAA,MAAM,EAAEL,MAPxB;AAQgB,IAAA,OAAO,EAAE8B,WARzB;AASgB,IAAA,SAAS,EAAEH,UAT3B;AAUgB,IAAA,WAAW,EAAE,qBAAAC,CAAC;AAAA,aAAIA,CAAC,CAACQ,cAAF,EAAJ;AAAA;AAV9B,kBAWE;AAAK,IAAA,EAAE,EAAEhB,EAAT;AAAa,IAAA,SAAS,EAAE;AAAxB,KAEIjB,QAAQ,gBACJ,oBAAC,uBAAD;AAAY,IAAA,SAAS,EAAEoB,4BAA4B,GAAG,oBAAH,GAA0B,EAA7E;AAAiF,IAAA,IAAI,EAAC;AAAtF,IADI,GAEJG,YAAY,gBACV,oBAAC,yBAAD;AAAc,IAAA,SAAS,EAAEH,4BAA4B,GAAG,oBAAH,GAA0B,EAA/E;AAAmF,IAAA,IAAI,EAAC;AAAxF,IADU,gBAEV,oBAAC,wBAAD;AAAa,IAAA,SAAS,EAAEA,4BAA4B,GAAG,oBAAH,GAA0B,EAA9E;AAAkF,IAAA,IAAI,EAAC;AAAvF,IANV,CAXF,EAqBID,KAAK,iBAEH;AAAO,IAAA,SAAS,EAAE,OAAlB;AACO,IAAA,OAAO,EAAEF;AADhB,KAEGE,KAFH,CAvBN,CADF;AAgCD,CA3DgB,CAAjB;;AAZEF,EAAAA,E;AACAjB,EAAAA,Q;AACAkB,EAAAA,M;AACAC,EAAAA,K;AACAjB,EAAAA,W;AACAmB,EAAAA,Q;AACAxB,EAAAA,M;AAEAuB,EAAAA,4B;AACAG,EAAAA,Y;;eAgEaV,Q","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .icon,\n    .label {\n      pointer-events: none;\n    }\n\n    .icon{\n      background-color: ${COLORS.white};\n    }\n\n    .icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                       id,\n                                                       selected,\n                                                       select,\n                                                       label,\n                                                       showWarning,\n                                                       iconPointerEventsTransparent,\n                                                       disabled,\n                                                       margin,\n                                                       size,\n                                                       semiSelected\n                                                     }: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled) {\n      return;\n    }\n    select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                    selected={selected}\n                    tabIndex={disabled ? -1 : 0}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={e => e.preventDefault()}>\n      <div id={id} className={'icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}
+{"version":3,"sources":["../../../src/InputFields/Checkbox.tsx"],"names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","onKeyPress","e","keyCode","handleClick","Size","Medium","toString","toLowerCase","concat","preventDefault"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,cAAc,GAAGC,0BAAOC,GAAV,soDAMhB,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAjD;AAAA,CANW,EASTC,eAAOC,KATE,EA0BL,UAAAH,KAAK;AAAA,SAAKA,KAAK,CAACI,QAAN,GAAiBF,eAAOG,WAAxB,GAAsCL,KAAK,CAACM,WAAN,GAAoBJ,eAAOK,WAA3B,GAAyCL,eAAOM,WAA3F;AAAA,CA1BA,EAoCd,mCAAkBC,2BAAmBC,OAArC,EAA8CR,eAAOC,KAArD,CApCc,EA2Cd,mCAAkBM,2BAAmBC,OAArC,EAA8CR,eAAOC,KAArD,CA3Cc,EAkDd,mCAAkBM,2BAAmBC,OAArC,EAA8CR,eAAOC,KAArD,CAlDc,EA4DMD,eAAOS,KA5Db,EA6DQT,eAAOG,WA7Df,EAgEHH,eAAOM,WAhEJ,EAuEMN,eAAOU,UAvEb,EA0EHV,eAAOW,WA1EJ,EAiFAX,eAAOY,WAjFP,EAqFHZ,eAAOa,WArFJ,EA8FPb,eAAOc,WA9FA,EAsGMd,eAAOS,KAtGb,EA0GLT,eAAOc,WA1GF,CAApB;;AA4HA,IAAMC,QAAQ,gBAAGC,KAAK,CAACC,UAAN,CAAwC,gBAYIC,GAZJ,EAYY;AAAA;;AAAA,MAXTC,EAWS,QAXTA,EAWS;AAAA,MAVTjB,QAUS,QAVTA,QAUS;AAAA,MATTkB,MASS,QATTA,MASS;AAAA,MARTC,KAQS,QARTA,KAQS;AAAA,MAPTjB,WAOS,QAPTA,WAOS;AAAA,MANTkB,4BAMS,QANTA,4BAMS;AAAA,MALTC,QAKS,QALTA,QAKS;AAAA,MAJTxB,MAIS,QAJTA,MAIS;AAAA,MAHTyB,IAGS,QAHTA,IAGS;AAAA,MAFTC,YAES,QAFTA,YAES;AAAA,MADTC,QACS,QADTA,QACS;;AACnE,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,CAAD,EAAY;AAC7B,QAAIA,CAAC,CAACC,OAAF,KAAc,EAAd,IAAoB,CAACN,QAAzB,EAAmC;AACjCH,MAAAA,MAAM,CAAC,CAAClB,QAAF,CAAN;AACD;AACF,GAJD;;AAMA,MAAM4B,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIP,QAAJ,EAAc;AACZ;AACD;;AACDH,IAAAA,MAAM,CAAC,CAAClB,QAAF,CAAN;AACD,GALD;;AAOAsB,EAAAA,IAAI,YAAGA,IAAH,yCAAWO,YAAKC,MAApB;AAEA,sBACE,oBAAC,cAAD;AAAgB,IAAA,GAAG,EAAEb,EAArB;AACgB,IAAA,GAAG,EAAED,GADrB;AAEgB,IAAA,QAAQ,EAAEK,QAF1B;AAGgB,IAAA,SAAS,EAAEC,IAAI,CAACS,QAAL,GAAgBC,WAAhB,GAA8BC,MAA9B,CAAqCZ,QAAQ,GAAG,WAAH,GAAiB,EAA9D,CAH3B;AAIgB,IAAA,QAAQ,EAAErB,QAJ1B;AAKgB,IAAA,QAAQ,EAAEqB,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAL1C;AAMgB,IAAA,WAAW,EAAEnB,WAN7B;AAOgB,IAAA,MAAM,EAAEL,MAPxB;AAQgB,IAAA,OAAO,EAAE+B,WARzB;AASgB,IAAA,SAAS,EAAEH,UAT3B;AAUgB,IAAA,WAAW,EAAE,qBAAAC,CAAC;AAAA,aAAIA,CAAC,CAACQ,cAAF,EAAJ;AAAA;AAV9B,kBAWE;AAAK,IAAA,EAAE,EAAEjB,EAAT;AAAa,IAAA,SAAS,EAAE;AAAxB,KAEIjB,QAAQ,gBACJ,oBAAC,uBAAD;AAAY,IAAA,SAAS,EAAEoB,4BAA4B,GAAG,oBAAH,GAA0B,EAA7E;AAAiF,IAAA,IAAI,EAAC;AAAtF,IADI,GAEJG,YAAY,gBACV,oBAAC,yBAAD;AAAc,IAAA,SAAS,EAAEH,4BAA4B,GAAG,oBAAH,GAA0B,EAA/E;AAAmF,IAAA,IAAI,EAAC;AAAxF,IADU,gBAEV,oBAAC,wBAAD;AAAa,IAAA,SAAS,EAAEA,4BAA4B,GAAG,oBAAH,GAA0B,EAA9E;AAAkF,IAAA,IAAI,EAAC;AAAvF,IANV,CAXF,EAqBID,KAAK,iBAEH;AAAO,IAAA,SAAS,EAAE,gBAAlB;AACO,IAAA,OAAO,EAAEF;AADhB,KAEGE,KAFH,CAvBN,EA8BI,CAACA,KAAD,iBACA;AAAO,IAAA,SAAS,EAAE,gBAAlB;AACO,IAAA,OAAO,EAAEF;AADhB,KAEGO,QAFH,CA/BJ,CADF;AAuCD,CAnEgB,CAAjB;;AAZEP,EAAAA,E;AACAjB,EAAAA,Q;AACAkB,EAAAA,M;AACAC,EAAAA,K;AACAjB,EAAAA,W;AACAmB,EAAAA,Q;AACAxB,EAAAA,M;AAEAuB,EAAAA,4B;AACAG,EAAAA,Y;;eAwEaV,Q","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\nconst StyledCheckBox = styled.div<{ disabled?: boolean; showWarning?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon{\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  margin?: string;\n  size?: Size;\n  iconPointerEventsTransparent?: boolean;\n  semiSelected?: boolean;\n}\n\nconst Checkbox = React.forwardRef<HTMLDivElement, Props>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            showWarning,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled) {\n      return;\n    }\n    select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                    selected={selected}\n                    tabIndex={disabled ? -1 : 0}\n                    showWarning={showWarning}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={e => e.preventDefault()}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"file":"Checkbox.js"}

package/dist/js/InputFields/Label.d.ts

@@ -2,10 +2,11 @@
  * Import React libraries.
  */
 import * as React from 'react';
+import { Size } from '../types';
 declare type LabelProps = {
     inputId: string;
     text: string;
-    size?: 'small' | 'medium';
+    size?: Size.Small | Size.Medium;
     margin?: string;
 };
 declare const InputLabel: React.FunctionComponent<LabelProps>;

package/dist/js/InputFields/Label.js

@@ -101,7 +101,6 @@ var InputLabel = function InputLabel(_ref) {
 InputLabel.propTypes = {
   inputId: _propTypes.default.string.isRequired,
   text: _propTypes.default.string.isRequired,
-  size: _propTypes.default.oneOf(['small', 'medium']),
   margin: _propTypes.default.string
 };
 var _default = InputLabel;

package/dist/js/InputFields/Label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/Label.tsx"],"names":["Label","styled","label","COLORS","neutral_500","BREAKPOINTS","MEDIUM","LabelRow","div","props","margin","InputLabel","inputId","text","size","React","useState","required","setRequired","useEffect","document","getElementById","getAttribute","onTriggerClick","id","click"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA,IAAMA,KAAK,GAAGC,0BAAOC,KAAV,sKACP,qCAAoB,CAApB,EAAuBC,eAAOC,WAA9B,CADO,EAGPC,oBAAYC,MAHL,EAIL,oCAAmB,CAAnB,EAAsBH,eAAOC,WAA7B,CAJK,EAQL,qCAAoB,CAApB,EAAuBD,eAAOC,WAA9B,CARK,EAWL,oCAAmB,CAAnB,EAAsBD,eAAOC,WAA7B,CAXK,CAAX;;AAeA,IAAMG,QAAQ,GAAGN,0BAAOO,GAAV,uIAGV,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAxD;AAAA,CAHU,CAAd,C,CAMA;;;AAQA,IAAMC,UAA+C,GAAG,SAAlDA,UAAkD,OAAiD;AAAA;;AAAA,MAA9CC,OAA8C,QAA9CA,OAA8C;AAAA,MAArCC,IAAqC,QAArCA,IAAqC;AAAA,MAA/BC,IAA+B,QAA/BA,IAA+B;AAAA,MAAzBJ,MAAyB,QAAzBA,MAAyB;;AACvG;AACA,wBAAgCK,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,WAAjB;AAEA;AACF;AACA;;;AACEH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AAAA;;AACpB,QAAI,0BAAAC,QAAQ,CAACC,cAAT,CAAwBT,OAAxB,iFAAkCU,YAAlC,CAA+C,UAA/C,OAA+D,EAAnE,EAAuE;AACrEJ,MAAAA,WAAW,CAAC,IAAD,CAAX;AACD,KAFD,MAEO;AACLA,MAAAA,WAAW,CAAC,KAAD,CAAX;AACD;AACF,GAND,EAMG,2BAACE,QAAQ,CAACC,cAAT,CAAwBT,OAAxB,CAAD,2DAAC,uBAAkCU,YAAlC,CAA+C,UAA/C,CAAD,CANH;AAOA;AACF;AACA;AACA;;AACE,MAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,EAAD,EAAsB;AAAA;;AAC3C,8BAAAJ,QAAQ,CAACC,cAAT,CAAwBG,EAAxB,mFAA6BC,KAA7B;AACD,GAFD;;AAIA,sBACE,oBAAC,QAAD;AAAU,IAAA,MAAM,EAAEf;AAAlB,kBACE,oBAAC,KAAD;AAAO,IAAA,OAAO,EAAEE,OAAhB;AAAyB,IAAA,OAAO,EAAE;AAAA,aAAMW,cAAc,CAACX,OAAD,CAApB;AAAA,KAAlC;AAAiE,IAAA,SAAS,EAAEE,IAAI,IAAI;AAApF,KACGD,IADH,CADF,EAIGI,QAAQ,iBAAI,oBAAC,qBAAD,YAJf,CADF;AAQD,CA9BD;;;AANEL,EAAAA,O;AACAC,EAAAA,I;AACAC,EAAAA,I,4BAAO,O,EAAU,Q;AACjBJ,EAAAA,M;;eAmCaC,U","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { RequiredStar } from './styling';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\n\n// Add component-specific styles.\nconst Label = styled.label`\n  ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  &.small {\n    ${ComponentXXSStyling(1, COLORS.neutral_500)}\n  }\n  &.medium {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n  display: flex;\n  justify-content: space-between;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\n// Add component-specific types\ntype LabelProps = {\n  inputId: string;\n  text: string;\n  size?: 'small' | 'medium';\n  margin?: string;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin }: LabelProps) => {\n  // Globally used variables within the component\n  const [required, setRequired] = React.useState<boolean>(false);\n\n  /**\n   * Checks if field is set as required and we have to mark it accordingly.\n   */\n  React.useEffect(() => {\n    if (document.getElementById(inputId)?.getAttribute('required') === '') {\n      setRequired(true);\n    } else {\n      setRequired(false);\n    }\n  }, [document.getElementById(inputId)?.getAttribute('required')]);\n  /**\n   * Triggers a click element on a specific element.\n   * @param id - ID of the element which needs to be clicked.\n   */\n  const onTriggerClick = (id: string): void => {\n    document.getElementById(id)?.click();\n  };\n\n  return (\n    <LabelRow margin={margin}>\n      <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n        {text}\n      </Label>\n      {required && <RequiredStar>*</RequiredStar>}\n    </LabelRow>\n  );\n};\n\nexport default InputLabel;\n"],"file":"Label.js"}
+{"version":3,"sources":["../../../src/InputFields/Label.tsx"],"names":["Label","styled","label","COLORS","neutral_500","BREAKPOINTS","MEDIUM","LabelRow","div","props","margin","InputLabel","inputId","text","size","React","useState","required","setRequired","useEffect","document","getElementById","getAttribute","onTriggerClick","id","click"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AAMA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AACA,IAAMA,KAAK,GAAGC,0BAAOC,KAAV,sKACP,qCAAoB,CAApB,EAAuBC,eAAOC,WAA9B,CADO,EAGPC,oBAAYC,MAHL,EAIL,oCAAmB,CAAnB,EAAsBH,eAAOC,WAA7B,CAJK,EAQL,qCAAoB,CAApB,EAAuBD,eAAOC,WAA9B,CARK,EAWL,oCAAmB,CAAnB,EAAsBD,eAAOC,WAA7B,CAXK,CAAX;;AAeA,IAAMG,QAAQ,GAAGN,0BAAOO,GAAV,uIAGV,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAxD;AAAA,CAHU,CAAd,C,CAMA;;;AAQA,IAAMC,UAA+C,GAAG,SAAlDA,UAAkD,OAAiD;AAAA;;AAAA,MAA9CC,OAA8C,QAA9CA,OAA8C;AAAA,MAArCC,IAAqC,QAArCA,IAAqC;AAAA,MAA/BC,IAA+B,QAA/BA,IAA+B;AAAA,MAAzBJ,MAAyB,QAAzBA,MAAyB;;AACvG;AACA,wBAAgCK,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,WAAjB;AAEA;AACF;AACA;;;AACEH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AAAA;;AACpB,QAAI,0BAAAC,QAAQ,CAACC,cAAT,CAAwBT,OAAxB,iFAAkCU,YAAlC,CAA+C,UAA/C,OAA+D,EAAnE,EAAuE;AACrEJ,MAAAA,WAAW,CAAC,IAAD,CAAX;AACD,KAFD,MAEO;AACLA,MAAAA,WAAW,CAAC,KAAD,CAAX;AACD;AACF,GAND,EAMG,2BAACE,QAAQ,CAACC,cAAT,CAAwBT,OAAxB,CAAD,2DAAC,uBAAkCU,YAAlC,CAA+C,UAA/C,CAAD,CANH;AAOA;AACF;AACA;AACA;;AACE,MAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,EAAD,EAAsB;AAAA;;AAC3C,8BAAAJ,QAAQ,CAACC,cAAT,CAAwBG,EAAxB,mFAA6BC,KAA7B;AACD,GAFD;;AAIA,sBACE,oBAAC,QAAD;AAAU,IAAA,MAAM,EAAEf;AAAlB,kBACE,oBAAC,KAAD;AAAO,IAAA,OAAO,EAAEE,OAAhB;AAAyB,IAAA,OAAO,EAAE;AAAA,aAAMW,cAAc,CAACX,OAAD,CAApB;AAAA,KAAlC;AAAiE,IAAA,SAAS,EAAEE,IAAI,IAAI;AAApF,KACGD,IADH,CADF,EAIGI,QAAQ,iBAAI,oBAAC,qBAAD,YAJf,CADF;AAQD,CA9BD;;;AANEL,EAAAA,O;AACAC,EAAAA,I;AAEAH,EAAAA,M;;eAmCaC,U","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { RequiredStar } from './styling';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\n\n// Add component-specific styles.\nconst Label = styled.label`\n  ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  &.small {\n    ${ComponentXXSStyling(1, COLORS.neutral_500)}\n  }\n  &.medium {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n  display: flex;\n  justify-content: space-between;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\n// Add component-specific types\ntype LabelProps = {\n  inputId: string;\n  text: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin }: LabelProps) => {\n  // Globally used variables within the component\n  const [required, setRequired] = React.useState<boolean>(false);\n\n  /**\n   * Checks if field is set as required and we have to mark it accordingly.\n   */\n  React.useEffect(() => {\n    if (document.getElementById(inputId)?.getAttribute('required') === '') {\n      setRequired(true);\n    } else {\n      setRequired(false);\n    }\n  }, [document.getElementById(inputId)?.getAttribute('required')]);\n  /**\n   * Triggers a click element on a specific element.\n   * @param id - ID of the element which needs to be clicked.\n   */\n  const onTriggerClick = (id: string): void => {\n    document.getElementById(id)?.click();\n  };\n\n  return (\n    <LabelRow margin={margin}>\n      <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n        {text}\n      </Label>\n      {required && <RequiredStar>*</RequiredStar>}\n    </LabelRow>\n  );\n};\n\nexport default InputLabel;\n"],"file":"Label.js"}

package/dist/js/InputFields/PasswordField.d.ts

@@ -1,3 +1,4 @@
+import { Size } from '../types';
 declare type PasswordFieldProps = {
     id: string;
     disabled?: boolean;
@@ -10,7 +11,7 @@ declare type PasswordFieldProps = {
     placeholder?: string;
     required?: boolean;
     readOnly?: boolean;
-    size?: 'small' | 'medium';
+    size?: Size.Small | Size.Medium;
     margin?: string;
 };
 declare const PasswordField: ({ id, disabled, locked, onChange, hasError, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => JSX.Element;

package/dist/js/InputFields/PasswordField.js

@@ -166,7 +166,6 @@ PasswordField.propTypes = {
   placeholder: _propTypes.default.string,
   required: _propTypes.default.bool,
   readOnly: _propTypes.default.bool,
-  size: _propTypes.default.oneOf(['small', 'medium']),
   margin: _propTypes.default.string
 };
 var _default = PasswordField;

package/dist/js/InputFields/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/PasswordField.tsx"],"names":["StyledPassSwitch","styled","div","BREAKPOINTS","MEDIUM","PasswordRow","PasswordField","id","disabled","locked","onChange","hasError","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","React","useState","passwordHidden","setPasswordHidden","inputRef","useRef","tabbedHere","setTabbedHere","handleKeyDown","e","keyCode","target","includes","current","focus","display","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\nimport { InputFieldStyling, InputWrapper } from './styling';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype PasswordFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (text: string) => void;\n  hasError?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: 'small' | 'medium';\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  float: right;\n  margin-left: -40px;\n  margin-top: 8px;\n  position: relative;\n  z-index: 1;\n  height: 30px;\n  width: 30px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 12px;\n  }\n\n  &.small {\n    margin-top: 8px;\n  }\n\n  &.medium {\n    margin-top: 12px;\n  }\n\n  svg {\n    cursor: pointer;\n  }\n  div {\n    &:focus {\n      outline: none;\n      svg {\n        box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        border-radius: 4px;\n      }\n    }\n  }\n`;\n\nconst PasswordRow = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst PasswordField = ({ id, disabled, locked, onChange, hasError, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        locked={locked}\n        margin={margin}\n        tabIndex={disabled ? -1 : 0}\n        onFocus={(e: any) => {\n          if (!e?.target?.id.includes(id) && !disabled && !locked) {\n            setTabbedHere(true);\n            inputRef.current.focus();\n          }\n        }}>\n        <div style={{ display: 'block' }}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name=\"password\"\n              value={value}\n              className={(hasError ? 'error' : '').concat(size ? size : '')}\n              tabIndex={-1}\n              autoComplete={autoComplete}\n              placeholder={placeholder}\n              disabled={disabled}\n              locked={locked}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n              tabbedHere={tabbedHere}\n              onBlur={() => setTabbedHere(false)}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !locked ? (\n                passwordHidden ? (\n                  <div id={`${id}_Visible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M4.05966 12.5853L3.25603 11.7821C2.86542 11.3917 2.23234 11.3918 1.84186 11.7823C1.45115 12.173 1.45115 12.8065 1.84186 13.1972L2.6448 14.0001C2.8984 14.2537 3.1593 14.4956 3.42683 14.7256L1.84172 16.3107C1.4512 16.7013 1.4512 17.3344 1.84172 17.725C2.23225 18.1155 2.86541 18.1155 3.25593 17.725L5.0508 15.9301C5.73486 16.3644 6.44837 16.7336 7.18249 17.0377L6.28268 19.5236C6.09471 20.0429 6.36331 20.6163 6.88262 20.8043C7.40193 20.9922 7.9753 20.7236 8.16327 20.2043L9.08108 17.6687C9.89493 17.8758 10.7238 18.0088 11.5569 18.0675C11.5516 18.1092 11.5488 18.1517 11.5488 18.1948V20.4897C11.5488 21.042 11.9965 21.4897 12.5488 21.4897C13.1011 21.4897 13.5488 21.042 13.5488 20.4897V18.1948C13.5488 18.1517 13.5461 18.1092 13.5408 18.0675C14.3739 18.0088 15.2027 17.8758 16.0166 17.6687L16.9344 20.2043C17.1224 20.7236 17.6957 20.9922 18.215 20.8043C18.7343 20.6163 19.003 20.0429 18.815 19.5236L17.9152 17.0377C18.6462 16.7349 19.3568 16.3675 20.0382 15.9356L21.8276 17.725C22.2181 18.1155 22.8513 18.1155 23.2418 17.725C23.6323 17.3344 23.6323 16.7013 23.2418 16.3107L21.6632 14.7322C21.9334 14.5001 22.1969 14.2561 22.4529 14.0001L23.2558 13.1972C23.6465 12.8065 23.6465 12.173 23.2558 11.7823C22.8653 11.3918 22.2322 11.3917 21.8416 11.7821L21.038 12.5853C16.3496 17.2737 8.7481 17.2737 4.05966 12.5853Z\"\n                        fill=\"#666666\"></path>\n                    </svg>\n                  </div>\n                ) : (\n                  <div id={`${id}_NotVisible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M12.9618 15.4897C14.6186 15.4897 15.9618 14.1466 15.9618 12.4897C15.9618 10.8329 14.6186 9.48975 12.9618 9.48975C11.3049 9.48975 9.96179 10.8329 9.96179 12.4897C9.96179 14.1466 11.3049 15.4897 12.9618 15.4897Z\"\n                        fill=\"#666666\"\n                      />\n                      <path\n                        d=\"M2.87753 10.83L2.14123 11.9081C1.90198 12.2585 1.90198 12.721 2.14123 13.0714L2.87753 14.1495C7.74011 21.2698 18.1835 21.2698 23.0461 14.1495L23.7824 13.0714C24.0216 12.721 24.0216 12.2585 23.7824 11.9081L23.0461 10.83C18.1835 3.70968 7.74011 3.70967 2.87753 10.83ZM21.3944 11.9579L21.7577 12.4897L21.3944 13.0216C17.326 18.9791 8.59763 18.9791 4.52914 13.0216L4.16592 12.4897L4.52914 11.9579C8.59763 6.00037 17.326 6.00037 21.3944 11.9579Z\"\n                        fill=\"#666666\"\n                      />\n                    </svg>\n                  </div>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && <span className=\"error-msg\">{validationMessage}</span>}\n    </>\n  );\n};\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}
+{"version":3,"sources":["../../../src/InputFields/PasswordField.tsx"],"names":["StyledPassSwitch","styled","div","BREAKPOINTS","MEDIUM","PasswordRow","PasswordField","id","disabled","locked","onChange","hasError","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","React","useState","passwordHidden","setPasswordHidden","inputRef","useRef","tabbedHere","setTabbedHere","handleKeyDown","e","keyCode","target","includes","current","focus","display","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS } from '../styles';\nimport { Size} from '../types';\nimport { InputFieldStyling, InputWrapper } from './styling';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\ntype PasswordFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (text: string) => void;\n  hasError?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  float: right;\n  margin-left: -40px;\n  margin-top: 8px;\n  position: relative;\n  z-index: 1;\n  height: 30px;\n  width: 30px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin-top: 12px;\n  }\n\n  &.small {\n    margin-top: 8px;\n  }\n\n  &.medium {\n    margin-top: 12px;\n  }\n\n  svg {\n    cursor: pointer;\n  }\n  div {\n    &:focus {\n      outline: none;\n      svg {\n        box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        border-radius: 4px;\n      }\n    }\n  }\n`;\n\nconst PasswordRow = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst PasswordField = ({ id, disabled, locked, onChange, hasError, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        locked={locked}\n        margin={margin}\n        tabIndex={disabled ? -1 : 0}\n        onFocus={(e: any) => {\n          if (!e?.target?.id.includes(id) && !disabled && !locked) {\n            setTabbedHere(true);\n            inputRef.current.focus();\n          }\n        }}>\n        <div style={{ display: 'block' }}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name=\"password\"\n              value={value}\n              className={(hasError ? 'error' : '').concat(size ? size : '')}\n              tabIndex={-1}\n              autoComplete={autoComplete}\n              placeholder={placeholder}\n              disabled={disabled}\n              locked={locked}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n              tabbedHere={tabbedHere}\n              onBlur={() => setTabbedHere(false)}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !locked ? (\n                passwordHidden ? (\n                  <div id={`${id}_Visible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M4.05966 12.5853L3.25603 11.7821C2.86542 11.3917 2.23234 11.3918 1.84186 11.7823C1.45115 12.173 1.45115 12.8065 1.84186 13.1972L2.6448 14.0001C2.8984 14.2537 3.1593 14.4956 3.42683 14.7256L1.84172 16.3107C1.4512 16.7013 1.4512 17.3344 1.84172 17.725C2.23225 18.1155 2.86541 18.1155 3.25593 17.725L5.0508 15.9301C5.73486 16.3644 6.44837 16.7336 7.18249 17.0377L6.28268 19.5236C6.09471 20.0429 6.36331 20.6163 6.88262 20.8043C7.40193 20.9922 7.9753 20.7236 8.16327 20.2043L9.08108 17.6687C9.89493 17.8758 10.7238 18.0088 11.5569 18.0675C11.5516 18.1092 11.5488 18.1517 11.5488 18.1948V20.4897C11.5488 21.042 11.9965 21.4897 12.5488 21.4897C13.1011 21.4897 13.5488 21.042 13.5488 20.4897V18.1948C13.5488 18.1517 13.5461 18.1092 13.5408 18.0675C14.3739 18.0088 15.2027 17.8758 16.0166 17.6687L16.9344 20.2043C17.1224 20.7236 17.6957 20.9922 18.215 20.8043C18.7343 20.6163 19.003 20.0429 18.815 19.5236L17.9152 17.0377C18.6462 16.7349 19.3568 16.3675 20.0382 15.9356L21.8276 17.725C22.2181 18.1155 22.8513 18.1155 23.2418 17.725C23.6323 17.3344 23.6323 16.7013 23.2418 16.3107L21.6632 14.7322C21.9334 14.5001 22.1969 14.2561 22.4529 14.0001L23.2558 13.1972C23.6465 12.8065 23.6465 12.173 23.2558 11.7823C22.8653 11.3918 22.2322 11.3917 21.8416 11.7821L21.038 12.5853C16.3496 17.2737 8.7481 17.2737 4.05966 12.5853Z\"\n                        fill=\"#666666\"></path>\n                    </svg>\n                  </div>\n                ) : (\n                  <div id={`${id}_NotVisible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                      <path\n                        d=\"M12.9618 15.4897C14.6186 15.4897 15.9618 14.1466 15.9618 12.4897C15.9618 10.8329 14.6186 9.48975 12.9618 9.48975C11.3049 9.48975 9.96179 10.8329 9.96179 12.4897C9.96179 14.1466 11.3049 15.4897 12.9618 15.4897Z\"\n                        fill=\"#666666\"\n                      />\n                      <path\n                        d=\"M2.87753 10.83L2.14123 11.9081C1.90198 12.2585 1.90198 12.721 2.14123 13.0714L2.87753 14.1495C7.74011 21.2698 18.1835 21.2698 23.0461 14.1495L23.7824 13.0714C24.0216 12.721 24.0216 12.2585 23.7824 11.9081L23.0461 10.83C18.1835 3.70968 7.74011 3.70967 2.87753 10.83ZM21.3944 11.9579L21.7577 12.4897L21.3944 13.0216C17.326 18.9791 8.59763 18.9791 4.52914 13.0216L4.16592 12.4897L4.52914 11.9579C8.59763 6.00037 17.326 6.00037 21.3944 11.9579Z\"\n                        fill=\"#666666\"\n                      />\n                    </svg>\n                  </div>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && <span className=\"error-msg\">{validationMessage}</span>}\n    </>\n  );\n};\n\nexport default PasswordField;\n"],"file":"PasswordField.js"}

package/dist/js/InputFields/QuickSearch.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Size } from '../types';
 declare type QuickSearchProps = {
     id: string;
     searchTerm?: string;
@@ -9,7 +10,7 @@ declare type QuickSearchProps = {
     performSearchLabel?: string;
     disabled?: boolean;
     onKeyDown?: (e: React.KeyboardEvent) => void;
-    size?: 'small' | 'medium';
+    size?: Size.Small | Size.Medium;
     margin?: string;
     loading?: boolean;
 };

package/dist/js/InputFields/QuickSearch.js

@@ -17,6 +17,8 @@ var _Iconbutton = _interopRequireDefault(require("../Button/Iconbutton"));
 
 var _styling = require("./styling");
 
+var _types = require("../types");
+
 var _ = require("..");
 
 var _SystemIcons = require("../icons/systemicons/SystemIcons");
@@ -185,7 +187,7 @@ var QuickSearch = function QuickSearch(_ref) {
     className: size ? size : '',
     tabIndex: -1
   }, /*#__PURE__*/React.createElement(_.LoadingIndicator, {
-    size: "small",
+    size: _types.Size.Small,
     color: _.COLORS.neutral_600
   })));
 };
@@ -200,7 +202,6 @@ QuickSearch.propTypes = {
   performSearchLabel: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   onKeyDown: _propTypes.default.func,
-  size: _propTypes.default.oneOf(['small', 'medium']),
   margin: _propTypes.default.string,
   loading: _propTypes.default.bool
 };

package/dist/js/InputFields/QuickSearch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/QuickSearch.tsx"],"names":["QuickSearchField","StyledSearchField","props","margin","COLORS","white","neutral_600","expanded","primary_800","primary_700","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","loading","searchFieldRef","React","useRef","searchFieldInputRef","useState","searchFieldVisible","setSearchFieldVisible","tabbedHere","setTabbedHere","handleClickOutside","e","current","contains","target","length","useEffect","document","addEventListener","removeEventListener","focus","handleKeyDown","key","event","relatedTarget","concat","term","neutral_300","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport IconButton from '../Button/Iconbutton';\nimport { SearchIconWrapper, StyledIcon } from './styling';\nimport { COLORS, LoadingIndicator } from '..';\nimport { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';\nimport SearchBarInput from './components/SearchBarInput';\nimport { StyledSearchField } from './components/SearchField';\n\nconst QuickSearchField = styled(StyledSearchField)<{ expanded: boolean; margin?: string }>`\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  -webkit-transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n  transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n  background-color: transparent;\n  &.small {\n    width: 48px;\n  }\n\n  &.medium {\n    width: 56px;\n  }\n  \n  &.expanded{\n    width: 100%;\n    background-color: ${COLORS.white};\n  }\n\n  input {\n    ::placeholder {\n      font-style: italic;\n      color: ${COLORS.neutral_600};\n    }\n  }\n\n  box-shadow: ${(props) => (props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_800}` : 'none !important')};\n\n  &:hover {\n    box-shadow: ${(props) => (props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_700}` : 'none !important')};\n  }\n`;\n\ntype QuickSearchProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: 'small' | 'medium';\n  margin?: string;\n  loading?: boolean;\n};\n\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  onKeyDown,\n  size,\n  margin,\n  loading,\n}: QuickSearchProps) => {\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\n\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<boolean>(false);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const handleClickOutside = (e: any) => {\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\n      if (searchFieldVisible && !searchTerm?.length) {\n        setSearchFieldVisible(false);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    if (searchTerm?.length) {\n      setSearchFieldVisible(true);\n    }\n  }, [searchTerm]);\n\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  React.useEffect(() => {\n    if (searchFieldVisible) {\n      searchFieldInputRef?.current?.focus();\n    }\n  }, [searchFieldVisible, searchFieldInputRef, id]);\n\n  const handleKeyDown = (e: any) => {\n    if (onKeyDown) {\n      onKeyDown(e);\n    }\n    if (e.key === 'Escape') {\n      if (searchFieldVisible && !searchTerm?.length) {\n        setSearchFieldVisible(false);\n      }\n    }\n  };\n\n  return (\n    <QuickSearchField\n      ref={searchFieldRef}\n      expanded={searchFieldVisible}\n      id={`${id}_main`}\n      onBlur={(event: any) => {\n        if (event.relatedTarget && searchFieldRef?.current && !searchFieldRef.current.contains(event.relatedTarget) && !searchTerm) {\n          setSearchFieldVisible(false);\n        }\n      }}\n      data-testid={`${id}_main`}\n      className={(searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '').concat( searchFieldVisible ? ' expanded' : '')}\n      tabbedHere={tabbedHere}\n      tabIndex={-1}\n      margin={margin}>\n      {searchFieldVisible && (\n        <SearchBarInput\n          placeholder={disabled ? '' : placeholder}\n          id={id}\n          ref={searchFieldInputRef}\n          disabled={disabled}\n          onKeyDown={handleKeyDown}\n          size={size}\n          setTabbedHere={setTabbedHere}\n          setSearchTerm={(term: string) => setSearchTerm(term)}\n          searchTerm={searchTerm}\n          enterSearch={enterSearch}\n        />\n      )}\n      <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel} tabIndex={-1}>\n        <IconButton\n          id={`${id}_Searchbutton`}\n          variant=\"secondary\"\n          shape=\"circular\"\n          tabIndex={searchFieldVisible ? -1 : 0}\n          action={(e) => (searchFieldVisible ? enterSearch(e) : setSearchFieldVisible(searchFieldVisible ? false : true))}>\n          <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n        </IconButton>\n      </SearchIconWrapper>\n      <StyledIcon className={size ? size : ''} role=\"button\" tabIndex={-1} hidden={searchTerm === '' || searchTerm === undefined || !searchFieldVisible}>\n        <IconButton\n          id={`${id}_Clearicon`}\n          variant=\"secondary\"\n          shape=\"circular\"\n          action={(e) => {\n            removeSearch(e);\n            searchFieldInputRef?.current?.focus();\n          }}>\n          <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n        </IconButton>\n      </StyledIcon>\n      {loading && searchFieldVisible && (\n        <StyledIcon className={size ? size : ''} tabIndex={-1}>\n          <LoadingIndicator size=\"small\" color={COLORS.neutral_600} />\n        </StyledIcon>\n      )}\n    </QuickSearchField>\n  );\n};\n\nexport default QuickSearch;\n"],"file":"QuickSearch.js"}
+{"version":3,"sources":["../../../src/InputFields/QuickSearch.tsx"],"names":["QuickSearchField","StyledSearchField","props","margin","COLORS","white","neutral_600","expanded","primary_800","primary_700","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","loading","searchFieldRef","React","useRef","searchFieldInputRef","useState","searchFieldVisible","setSearchFieldVisible","tabbedHere","setTabbedHere","handleClickOutside","e","current","contains","target","length","useEffect","document","addEventListener","removeEventListener","focus","handleKeyDown","key","event","relatedTarget","concat","term","neutral_300","undefined","Size","Small"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport IconButton from '../Button/Iconbutton';\nimport { SearchIconWrapper, StyledIcon } from './styling';\nimport { Size } from '../types';\nimport { COLORS, LoadingIndicator } from '..';\nimport { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';\nimport SearchBarInput from './components/SearchBarInput';\nimport { StyledSearchField } from './components/SearchField';\n\nconst QuickSearchField = styled(StyledSearchField)<{ expanded: boolean; margin?: string }>`\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  -webkit-transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n  transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n  background-color: transparent;\n  &.small {\n    width: 48px;\n  }\n\n  &.medium {\n    width: 56px;\n  }\n  \n  &.expanded{\n    width: 100%;\n    background-color: ${COLORS.white};\n  }\n\n  input {\n    ::placeholder {\n      font-style: italic;\n      color: ${COLORS.neutral_600};\n    }\n  }\n\n  box-shadow: ${(props) => (props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_800}` : 'none !important')};\n\n  &:hover {\n    box-shadow: ${(props) => (props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_700}` : 'none !important')};\n  }\n`;\n\ntype QuickSearchProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  loading?: boolean;\n};\n\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  onKeyDown,\n  size,\n  margin,\n  loading,\n}: QuickSearchProps) => {\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\n\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<boolean>(false);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n\n  const handleClickOutside = (e: any) => {\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\n      if (searchFieldVisible && !searchTerm?.length) {\n        setSearchFieldVisible(false);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    if (searchTerm?.length) {\n      setSearchFieldVisible(true);\n    }\n  }, [searchTerm]);\n\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  React.useEffect(() => {\n    if (searchFieldVisible) {\n      searchFieldInputRef?.current?.focus();\n    }\n  }, [searchFieldVisible, searchFieldInputRef, id]);\n\n  const handleKeyDown = (e: any) => {\n    if (onKeyDown) {\n      onKeyDown(e);\n    }\n    if (e.key === 'Escape') {\n      if (searchFieldVisible && !searchTerm?.length) {\n        setSearchFieldVisible(false);\n      }\n    }\n  };\n\n  return (\n    <QuickSearchField\n      ref={searchFieldRef}\n      expanded={searchFieldVisible}\n      id={`${id}_main`}\n      onBlur={(event: any) => {\n        if (event.relatedTarget && searchFieldRef?.current && !searchFieldRef.current.contains(event.relatedTarget) && !searchTerm) {\n          setSearchFieldVisible(false);\n        }\n      }}\n      data-testid={`${id}_main`}\n      className={(searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '').concat( searchFieldVisible ? ' expanded' : '')}\n      tabbedHere={tabbedHere}\n      tabIndex={-1}\n      margin={margin}>\n      {searchFieldVisible && (\n        <SearchBarInput\n          placeholder={disabled ? '' : placeholder}\n          id={id}\n          ref={searchFieldInputRef}\n          disabled={disabled}\n          onKeyDown={handleKeyDown}\n          size={size}\n          setTabbedHere={setTabbedHere}\n          setSearchTerm={(term: string) => setSearchTerm(term)}\n          searchTerm={searchTerm}\n          enterSearch={enterSearch}\n        />\n      )}\n      <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel} tabIndex={-1}>\n        <IconButton\n          id={`${id}_Searchbutton`}\n          variant=\"secondary\"\n          shape=\"circular\"\n          tabIndex={searchFieldVisible ? -1 : 0}\n          action={(e) => (searchFieldVisible ? enterSearch(e) : setSearchFieldVisible(searchFieldVisible ? false : true))}>\n          <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n        </IconButton>\n      </SearchIconWrapper>\n      <StyledIcon className={size ? size : ''} role=\"button\" tabIndex={-1} hidden={searchTerm === '' || searchTerm === undefined || !searchFieldVisible}>\n        <IconButton\n          id={`${id}_Clearicon`}\n          variant=\"secondary\"\n          shape=\"circular\"\n          action={(e) => {\n            removeSearch(e);\n            searchFieldInputRef?.current?.focus();\n          }}>\n          <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n        </IconButton>\n      </StyledIcon>\n      {loading && searchFieldVisible && (\n        <StyledIcon className={size ? size : ''} tabIndex={-1}>\n          <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n        </StyledIcon>\n      )}\n    </QuickSearchField>\n  );\n};\n\nexport default QuickSearch;\n"],"file":"QuickSearch.js"}

package/dist/js/InputFields/RadioButton.js

@@ -31,7 +31,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var StyledRadioButton = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n\n  ", "\n  cursor: pointer;\n \n  color: ", ";\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label{\n      cursor: inherit;\n    }\n\n    span {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n  }\n\n  &.medium {\n    ", "\n  }\n\n  &.large {\n    ", "\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .icon {\n      background-color: ", ";\n      box-shadow: 0 0 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .icon {\n      background: ", ";\n      box-shadow: none;\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .icon,\n    .label {\n      pointer-events: none;\n    }\n\n    .icon{\n      background-color: ", ";\n    }\n    \n    .icon svg {\n      color: ", ";\n    }\n  }\n"])), function (props) {
+var StyledRadioButton = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n \n  color: ", ";\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label{\n      cursor: inherit;\n    }\n\n    span {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .radio-button-icon {\n      background-color: ", ";\n      box-shadow: 0 0 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ", ";\n      box-shadow: none;\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon{\n      background-color: ", ";\n    }\n    \n    .radio-button-icon svg {\n      color: ", ";\n    }\n  }\n"])), function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 }, _styles.COLORS.black, function (props) {
   return props.selected ? _styles.COLORS.primary_500 : props.showWarning ? _styles.COLORS.warning_400 : _styles.COLORS.neutral_600;
@@ -75,7 +75,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     showWarning: showWarning,
     selected: selected
   }, /*#__PURE__*/React.createElement("div", {
-    className: 'icon',
+    className: 'radio-button-icon',
     id: id
   }, selected && /*#__PURE__*/React.createElement(_SystemIcons.RadioButtonOn, {
     className: iconPointerEventsTransparent ? "pointerTransparent" : "",
@@ -84,7 +84,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: iconPointerEventsTransparent ? "pointerTransparent" : "",
     size: "24px"
   })), /*#__PURE__*/React.createElement("div", {
-    className: 'label'
+    className: 'radio-button-label'
   }, label && /*#__PURE__*/React.createElement("label", {
     htmlFor: id
   }, label), additionalLabel !== undefined && /*#__PURE__*/React.createElement("span", null, additionalLabel)));

package/dist/js/InputFields/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/RadioButton.tsx"],"names":["StyledRadioButton","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","RadioButton","React","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","onKeyPress","e","keyCode","Size","Medium","preventDefault","toString","toLowerCase","concat","undefined"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,iBAAiB,GAAGC,0BAAOC,GAAV,uiDAQnB,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAjD;AAAA,CARc,EAWZC,eAAOC,KAXK,EA4BR,UAAAH,KAAK;AAAA,SAAKA,KAAK,CAACI,QAAN,GAAiBF,eAAOG,WAAxB,GAAsCL,KAAK,CAACM,WAAN,GAAoBJ,eAAOK,WAA3B,GAAyCL,eAAOM,WAA3F;AAAA,CA5BG,EA0Cf,qCAAoBC,2BAAmBC,OAAvC,EAAgDR,eAAOC,KAAvD,CA1Ce,EA+CjB,mCAAkBM,2BAAmBC,OAArC,EAA8CR,eAAOC,KAArD,CA/CiB,EAmDjB,mCAAkBM,2BAAmBC,OAArC,EAA8CR,eAAOC,KAArD,CAnDiB,EAuDjB,mCAAkBM,2BAAmBC,OAArC,EAA8CR,eAAOC,KAArD,CAvDiB,EA8DGD,eAAOS,KA9DV,EA+DKT,eAAOG,WA/DZ,EAkENH,eAAOM,WAlED,EAyEGN,eAAOU,UAzEV,EA4ENV,eAAOW,WA5ED,EAmFHX,eAAOY,WAnFJ,EAuFNZ,eAAOa,WAvFD,EAgGVb,eAAOc,WAhGG,EAwGGd,eAAOS,KAxGV,EA4GRT,eAAOc,WA5GC,CAAvB;;AA8HA,IAAMC,WAAW,gBAAGC,KAAK,CAACC,UAAN,CAAwC,gBAWlDC,GAXkD,EAW1C;AAAA;;AAAA,MAVhBC,EAUgB,QAVhBA,EAUgB;AAAA,MAThBjB,QASgB,QAThBA,QASgB;AAAA,MARhBkB,KAQgB,QARhBA,KAQgB;AAAA,MAPhBC,eAOgB,QAPhBA,eAOgB;AAAA,MANhBjB,WAMgB,QANhBA,WAMgB;AAAA,MALhBkB,MAKgB,QALhBA,MAKgB;AAAA,MAJhBC,QAIgB,QAJhBA,QAIgB;AAAA,MAHhBxB,MAGgB,QAHhBA,MAGgB;AAAA,MAFhByB,4BAEgB,QAFhBA,4BAEgB;AAAA,MADhBC,IACgB,QADhBA,IACgB;;AAChB,MAAMC,UAAU,GAAG,SAAbA,UAAa,CAACC,CAAD,EAAY;AAC7B,QAAIA,CAAC,CAACC,OAAF,KAAc,EAAd,IAAoB,CAACL,QAAzB,EAAmC;AACjCD,MAAAA,MAAM,CAAC,CAACpB,QAAF,CAAN;AACD;AACF,GAJD;;AAMAuB,EAAAA,IAAI,YAAGA,IAAH,yCAAWI,YAAKC,MAApB;AAEA,sBACE,oBAAC,iBAAD;AAAmB,IAAA,GAAG,EAAEX,EAAxB;AAA4B,IAAA,MAAM,EAAEpB,MAApC;AACmB,IAAA,GAAG,EAAEmB,GADxB;AAEmB,IAAA,OAAO,EAAE;AAAA,aAAM,CAACK,QAAD,IAAaD,MAAM,CAAC,CAACpB,QAAF,CAAzB;AAAA,KAF5B;AAGmB,IAAA,WAAW,EAAE,qBAAAyB,CAAC;AAAA,aAAIA,CAAC,CAACI,cAAF,EAAJ;AAAA,KAHjC;AAImB,IAAA,SAAS,EAAEL,UAJ9B;AAKmB,IAAA,QAAQ,EAAEH,QAL7B;AAMmB,IAAA,SAAS,EAAEE,IAAI,CAACO,QAAL,GAAgBC,WAAhB,GAA8BC,MAA9B,CAAqCX,QAAQ,GAAG,WAAH,GAAiB,EAA9D,CAN9B;AAOmB,IAAA,QAAQ,EAAEA,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAP7C;AAQmB,IAAA,WAAW,EAAEnB,WARhC;AASmB,IAAA,QAAQ,EAAEF;AAT7B,kBAUE;AAAK,IAAA,SAAS,EAAE,MAAhB;AAAwB,IAAA,EAAE,EAAEiB;AAA5B,KACIjB,QAAQ,iBAAI,oBAAC,0BAAD;AAAe,IAAA,SAAS,EAAEsB,4BAA4B,GAAG,oBAAH,GAA0B,EAAhF;AAAoF,IAAA,IAAI,EAAC;AAAzF,IADhB,EAEI,CAACtB,QAAD,iBAAa,oBAAC,2BAAD;AAAgB,IAAA,SAAS,EAAEsB,4BAA4B,GAAG,oBAAH,GAA0B,EAAjF;AAAqF,IAAA,IAAI,EAAC;AAA1F,IAFjB,CAVF,eAcE;AAAK,IAAA,SAAS,EAAE;AAAhB,KACGJ,KAAK,iBAAI;AAAO,IAAA,OAAO,EAAED;AAAhB,KAAqBC,KAArB,CADZ,EAEGC,eAAe,KAAKc,SAApB,iBAAiC,kCAAOd,eAAP,CAFpC,CAdF,CADF;AAqBD,CAzCmB,CAApB;;AAZEF,EAAAA,E;AACAjB,EAAAA,Q;AACAoB,EAAAA,M;AACAF,EAAAA,K;AACAC,EAAAA,e;AACAjB,EAAAA,W;AACAmB,EAAAA,Q;AACAC,EAAAA,4B;AACAzB,EAAAA,M;;eA+CagB,W","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, showWarning?: boolean, selected?: boolean }>`\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n \n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label{\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .icon,\n    .label {\n      pointer-events: none;\n    }\n\n    .icon{\n      background-color: ${COLORS.white};\n    }\n    \n    .icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n  id,\n  selected,\n  label,\n  additionalLabel,\n  showWarning,\n  select,\n  disabled,\n  margin,\n  iconPointerEventsTransparent,\n  size\n}: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledRadioButton key={id} margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={e => e.preventDefault()}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                       tabIndex={disabled ? -1 : 0}\n                       showWarning={showWarning}\n                       selected={selected}>\n      <div className={'icon'} id={id}>\n        { selected && <RadioButtonOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n        { !selected && <RadioButtonOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n      </div>\n      <div className={'label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"file":"RadioButton.js"}
+{"version":3,"sources":["../../../src/InputFields/RadioButton.tsx"],"names":["StyledRadioButton","styled","div","props","margin","COLORS","black","selected","primary_500","showWarning","warning_400","neutral_600","ComponentTextStyle","Regular","white","primary_20","primary_700","primary_100","primary_800","neutral_300","RadioButton","React","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","onKeyPress","e","keyCode","Size","Medium","preventDefault","toString","toLowerCase","concat","undefined"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle} from '../styles';\nimport { Size } from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles/typography';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, showWarning?: boolean, selected?: boolean }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n \n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.showWarning ? COLORS.warning_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label{\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    outline: none;\n\n    .radio-button-icon {\n      background-color: ${COLORS.white};\n      box-shadow: 0 0 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n\n      svg {\n        color: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ${COLORS.primary_100};\n      box-shadow: none;\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    box-shadow: none;\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon{\n      background-color: ${COLORS.white};\n    }\n    \n    .radio-button-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\ninterface Props {\n  id: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  showWarning?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n  id,\n  selected,\n  label,\n  additionalLabel,\n  showWarning,\n  select,\n  disabled,\n  margin,\n  iconPointerEventsTransparent,\n  size\n}: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledRadioButton key={id} margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={e => e.preventDefault()}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={size.toString().toLowerCase().concat(disabled ? ' disabled' : '')}\n                       tabIndex={disabled ? -1 : 0}\n                       showWarning={showWarning}\n                       selected={selected}>\n      <div className={'radio-button-icon'} id={id}>\n        { selected && <RadioButtonOn className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n        { !selected && <RadioButtonOff className={iconPointerEventsTransparent ? \"pointerTransparent\" : \"\"} size=\"24px\"/>}\n      </div>\n      <div className={'radio-button-label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"file":"RadioButton.js"}

package/dist/js/InputFields/ResponsiveComponentWrapper.d.ts

@@ -2,8 +2,9 @@
  * Import React libraries.
  */
 import * as React from 'react';
+import { Size } from '../types';
 declare type LabelProps = {
-    size?: 'small' | 'medium';
+    size?: Size.Small | Size.Medium;
     children?: any;
 };
 declare const ReponsiveComponentWrapper: React.FunctionComponent<LabelProps>;

package/dist/js/InputFields/ResponsiveComponentWrapper.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var React = _interopRequireWildcard(require("react"));
 
+var _types = require("../types");
+
 var _styles = require("../styles");
 
 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); }
@@ -52,11 +54,10 @@ var ReponsiveComponentWrapper = function ReponsiveComponentWrapper(_ref) {
       window.removeEventListener('resize', handleResize);
     };
   });
-  return size && size === 'medium' ? /*#__PURE__*/React.createElement(_styles.ComponentXS, null, children) : size && size === 'small' ? /*#__PURE__*/React.createElement(_styles.ComponentXXS, null, children) : isMediumView ? /*#__PURE__*/React.createElement(_styles.ComponentXS, null, children) : /*#__PURE__*/React.createElement(_styles.ComponentXXS, null, children);
+  return size && size === _types.Size.Medium ? /*#__PURE__*/React.createElement(_styles.ComponentXS, null, children) : size && size === _types.Size.Small ? /*#__PURE__*/React.createElement(_styles.ComponentXXS, null, children) : isMediumView ? /*#__PURE__*/React.createElement(_styles.ComponentXS, null, children) : /*#__PURE__*/React.createElement(_styles.ComponentXXS, null, children);
 };
 
 ReponsiveComponentWrapper.propTypes = {
-  size: _propTypes.default.oneOf(['small', 'medium']),
   children: _propTypes.default.any
 };
 var _default = ReponsiveComponentWrapper;

package/dist/js/InputFields/ResponsiveComponentWrapper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/ResponsiveComponentWrapper.tsx"],"names":["ReponsiveComponentWrapper","children","size","React","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","BREAKPOINTS","MEDIUM","replace","matches","addEventListener","cleanup","removeEventListener"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;;;;;;;;;;;;;;;;;;;AAQA,IAAMA,yBAA8D,GAAG,SAAjEA,yBAAiE,OAAoC;AAAA,MAAjCC,QAAiC,QAAjCA,QAAiC;AAAA,MAAvBC,IAAuB,QAAvBA,IAAuB;;AACzG;AACA,wBAAwCC,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;;AAEAH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AACpB,QAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,UAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,WAAqBC,oBAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,SAA3B,EAAsC,EAAtC,CAArB,EAAZ;AACAR,MAAAA,eAAe,CAACG,GAAG,CAACM,OAAL,CAAf;AACD,KAHD;;AAIAL,IAAAA,MAAM,CAACM,gBAAP,CAAwB,QAAxB,EAAkCR,YAAlC;AACA,WAAO,SAASS,OAAT,GAAmB;AACxBP,MAAAA,MAAM,CAACQ,mBAAP,CAA2B,QAA3B,EAAqCV,YAArC;AACD,KAFD;AAGD,GATD;AAWA,SAAON,IAAI,IAAIA,IAAI,KAAK,QAAjB,gBACL,oBAAC,mBAAD,QAAcD,QAAd,CADK,GAEHC,IAAI,IAAIA,IAAI,KAAK,OAAjB,gBACF,oBAAC,oBAAD,QAAeD,QAAf,CADE,GAEAI,YAAY,gBACd,oBAAC,mBAAD,QAAcJ,QAAd,CADc,gBAGd,oBAAC,oBAAD,QAAeA,QAAf,CAPF;AASD,CAxBD;;;AAJEC,EAAAA,I,4BAAO,O,EAAU,Q;AACjBD,EAAAA,Q;;eA6BaD,yB","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\n\n// Add component-specific types\ntype LabelProps = {\n  size?: 'small' | 'medium';\n  children?: any;\n};\n\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\n  // Globally used variables within the component\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\n      setIsMediumView(mql.matches);\n    };\n    window.addEventListener('resize', handleResize);\n    return function cleanup() {\n      window.removeEventListener('resize', handleResize);\n    };\n  });\n\n  return size && size === 'medium' ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : size && size === 'small' ? (\n    <ComponentXXS>{children}</ComponentXXS>\n  ) : isMediumView ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : (\n    <ComponentXXS>{children}</ComponentXXS>\n  );\n};\n\nexport default ReponsiveComponentWrapper;\n"],"file":"ResponsiveComponentWrapper.js"}
+{"version":3,"sources":["../../../src/InputFields/ResponsiveComponentWrapper.tsx"],"names":["ReponsiveComponentWrapper","children","size","React","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","BREAKPOINTS","MEDIUM","replace","matches","addEventListener","cleanup","removeEventListener","Size","Medium","Small"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;;;;;;;;;;;;;;;;;;;AAQA,IAAMA,yBAA8D,GAAG,SAAjEA,yBAAiE,OAAoC;AAAA,MAAjCC,QAAiC,QAAjCA,QAAiC;AAAA,MAAvBC,IAAuB,QAAvBA,IAAuB;;AACzG;AACA,wBAAwCC,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;;AAEAH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AACpB,QAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,UAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,WAAqBC,oBAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,SAA3B,EAAsC,EAAtC,CAArB,EAAZ;AACAR,MAAAA,eAAe,CAACG,GAAG,CAACM,OAAL,CAAf;AACD,KAHD;;AAIAL,IAAAA,MAAM,CAACM,gBAAP,CAAwB,QAAxB,EAAkCR,YAAlC;AACA,WAAO,SAASS,OAAT,GAAmB;AACxBP,MAAAA,MAAM,CAACQ,mBAAP,CAA2B,QAA3B,EAAqCV,YAArC;AACD,KAFD;AAGD,GATD;AAWA,SAAON,IAAI,IAAIA,IAAI,KAAKiB,YAAKC,MAAtB,gBACL,oBAAC,mBAAD,QAAcnB,QAAd,CADK,GAEHC,IAAI,IAAIA,IAAI,KAAKiB,YAAKE,KAAtB,gBACF,oBAAC,oBAAD,QAAepB,QAAf,CADE,GAEAI,YAAY,gBACd,oBAAC,mBAAD,QAAcJ,QAAd,CADc,gBAGd,oBAAC,oBAAD,QAAeA,QAAf,CAPF;AASD,CAxBD;;;AAHEA,EAAAA,Q;;eA6BaD,yB","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\n\n// Add component-specific types\ntype LabelProps = {\n  size?: Size.Small | Size.Medium;\n  children?: any;\n};\n\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\n  // Globally used variables within the component\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\n      setIsMediumView(mql.matches);\n    };\n    window.addEventListener('resize', handleResize);\n    return function cleanup() {\n      window.removeEventListener('resize', handleResize);\n    };\n  });\n\n  return size && size === Size.Medium ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : size && size === Size.Small ? (\n    <ComponentXXS>{children}</ComponentXXS>\n  ) : isMediumView ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : (\n    <ComponentXXS>{children}</ComponentXXS>\n  );\n};\n\nexport default ReponsiveComponentWrapper;\n"],"file":"ResponsiveComponentWrapper.js"}

package/dist/js/InputFields/SearchBar.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Size } from '../types';
 declare type SeachBarProps = {
     id: string;
     searchTerm?: string;
@@ -10,7 +11,7 @@ declare type SeachBarProps = {
     disabled?: boolean;
     validationMessage?: string;
     onKeyDown?: (e: React.KeyboardEvent) => void;
-    size?: 'small' | 'medium';
+    size?: Size.Small | Size.Medium;
     margin?: string;
 };
 declare const SearchBar: React.FunctionComponent<SeachBarProps>;