@laerdal/life-react-components 3.0.1-dev.9 → 3.1.0

package/dist/Image/ImageWithFallbacks.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ImageWithFallbacks.cjs","names":["ImageWithFallbacks","props","state","src","fallbackIndex","fallbacks","split","loaded","prevProps","setState","length","alt","loader","loading","rest","onError","onLoad","React","Component"],"sources":["../../src/Image/ImageWithFallbacks.tsx"],"sourcesContent":["import { LoadingIndicator } from '..';\r\nimport React from 'react';\r\n\r\nexport interface ImageWithFallbacksProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'onError' | 'onLoad' | 'onChange'>{\r\n  fallbacks: string;\r\n  src: string;\r\n  alt: string;\r\n  loader: boolean;\r\n}\r\n\r\ntype ImageWithFallbacksState = {\r\n  src: string;\r\n  fallbackIndex: number;\r\n  fallbacks: string[];\r\n  loaded: boolean;\r\n};\r\n\r\nclass ImageWithFallbacks extends React.Component<ImageWithFallbacksProps, ImageWithFallbacksState> {\r\n  constructor(props: ImageWithFallbacksProps) {\r\n    super(props);\r\n    this.state = {\r\n      src: props.src,\r\n      fallbackIndex: 0,\r\n      fallbacks: this.props.fallbacks.split('|'),\r\n      loaded: false,\r\n    };\r\n  }\r\n  componentDidUpdate(prevProps: ImageWithFallbacksProps) {\r\n    if (prevProps.src !== this.props.src && prevProps.fallbacks !== this.props.fallbacks) {\r\n      this.setState({\r\n        src: this.props.src,\r\n        fallbackIndex: 0,\r\n        fallbacks: this.props.fallbacks.split('|'),\r\n        loaded: false,\r\n      });\r\n    }\r\n  }\r\n  onError() {\r\n    if (this.state.fallbackIndex > this.state.fallbacks.length) {\r\n      return;\r\n    }\r\n    this.setState({\r\n      src: this.state.fallbacks[this.state.fallbackIndex],\r\n      fallbackIndex: this.state.fallbackIndex + 1,\r\n      fallbacks: this.state.fallbacks,\r\n    });\r\n  }\r\n  onLoad() {\r\n    this.setState({ ...this.state, loaded: true });\r\n  }\r\n  render() {\r\n    const {src, alt, fallbacks, loader, loading, ...rest} = this.props;\r\n    return (\r\n      <>\r\n        <img src={this.state.src}\r\n             onError={() => this.onError()}\r\n             onChange={() => this.onLoad()}\r\n             onLoad={() => this.onLoad()}\r\n             alt={this.props.alt}\r\n             {...rest}/>\r\n        {this.props.loader && !this.state.loaded && <LoadingIndicator id=\"imgWithFallbackLoadingIndicator\"></LoadingIndicator>}\r\n      </>\r\n    );\r\n  }\r\n}\r\n\r\nexport default ImageWithFallbacks;\r\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AACA;AAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgBpBA,kBAAkB;EAAA;EAAA;EACtB,4BAAYC,KAA8B,EAAE;IAAA;IAAA;IAC1C,0BAAMA,KAAK;IACX,MAAKC,KAAK,GAAG;MACXC,GAAG,EAAEF,KAAK,CAACE,GAAG;MACdC,aAAa,EAAE,CAAC;MAChBC,SAAS,EAAE,MAAKJ,KAAK,CAACI,SAAS,CAACC,KAAK,CAAC,GAAG,CAAC;MAC1CC,MAAM,EAAE;IACV,CAAC;IAAC;EACJ;EAAC;IAAA;IAAA,OACD,4BAAmBC,SAAkC,EAAE;MACrD,IAAIA,SAAS,CAACL,GAAG,KAAK,IAAI,CAACF,KAAK,CAACE,GAAG,IAAIK,SAAS,CAACH,SAAS,KAAK,IAAI,CAACJ,KAAK,CAACI,SAAS,EAAE;QACpF,IAAI,CAACI,QAAQ,CAAC;UACZN,GAAG,EAAE,IAAI,CAACF,KAAK,CAACE,GAAG;UACnBC,aAAa,EAAE,CAAC;UAChBC,SAAS,EAAE,IAAI,CAACJ,KAAK,CAACI,SAAS,CAACC,KAAK,CAAC,GAAG,CAAC;UAC1CC,MAAM,EAAE;QACV,CAAC,CAAC;MACJ;IACF;EAAC;IAAA;IAAA,OACD,mBAAU;MACR,IAAI,IAAI,CAACL,KAAK,CAACE,aAAa,GAAG,IAAI,CAACF,KAAK,CAACG,SAAS,CAACK,MAAM,EAAE;QAC1D;MACF;MACA,IAAI,CAACD,QAAQ,CAAC;QACZN,GAAG,EAAE,IAAI,CAACD,KAAK,CAACG,SAAS,CAAC,IAAI,CAACH,KAAK,CAACE,aAAa,CAAC;QACnDA,aAAa,EAAE,IAAI,CAACF,KAAK,CAACE,aAAa,GAAG,CAAC;QAC3CC,SAAS,EAAE,IAAI,CAACH,KAAK,CAACG;MACxB,CAAC,CAAC;IACJ;EAAC;IAAA;IAAA,OACD,kBAAS;MACP,IAAI,CAACI,QAAQ,iCAAM,IAAI,CAACP,KAAK;QAAEK,MAAM,EAAE;MAAI,GAAG;IAChD;EAAC;IAAA;IAAA,OACD,kBAAS;MAAA;MACP,kBAAwD,IAAI,CAACN,KAAK;QAA3DE,GAAG,eAAHA,GAAG;QAAEQ,GAAG,eAAHA,GAAG;QAAEN,SAAS,eAATA,SAAS;QAAEO,MAAM,eAANA,MAAM;QAAEC,OAAO,eAAPA,OAAO;QAAKC,IAAI;MACpD,oBACE;QAAA,wBACE;UAAK,GAAG,EAAE,IAAI,CAACZ,KAAK,CAACC,GAAI;UACpB,OAAO,EAAE;YAAA,OAAM,MAAI,CAACY,OAAO,EAAE;UAAA,CAAC;UAC9B,QAAQ,EAAE;YAAA,OAAM,MAAI,CAACC,MAAM,EAAE;UAAA,CAAC;UAC9B,MAAM,EAAE;YAAA,OAAM,MAAI,CAACA,MAAM,EAAE;UAAA,CAAC;UAC5B,GAAG,EAAE,IAAI,CAACf,KAAK,CAACU;QAAI,GAChBG,IAAI,EAAG,EACf,IAAI,CAACb,KAAK,CAACW,MAAM,IAAI,CAAC,IAAI,CAACV,KAAK,CAACK,MAAM,iBAAI,qBAAC,kBAAgB;UAAC,EAAE,EAAC;QAAiC,EAAoB;MAAA,EACrH;IAEP;EAAC;EAAA;AAAA,EA9C8BU,cAAK,CAACC,SAAS;AAAA,8BAA1ClB,kBAAkB;EAbtBK,SAAS;EACTF,GAAG;EACHQ,GAAG;EACHC,MAAM;AAAA;AAAA,eA2DOZ,kBAAkB;AAAA"}
+{"version":3,"file":"ImageWithFallbacks.cjs","names":["ImageWithFallbacks","props","state","src","fallbackIndex","fallbacks","split","loaded","prevProps","setState","length","alt","loader","loading","rest","onError","onLoad","React","Component"],"sources":["../../src/Image/ImageWithFallbacks.tsx"],"sourcesContent":["import { LoadingIndicator } from '..';\nimport React from 'react';\n\nexport interface ImageWithFallbacksProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'onError' | 'onLoad' | 'onChange'>{\n  fallbacks: string;\n  src: string;\n  alt: string;\n  loader: boolean;\n}\n\ntype ImageWithFallbacksState = {\n  src: string;\n  fallbackIndex: number;\n  fallbacks: string[];\n  loaded: boolean;\n};\n\nclass ImageWithFallbacks extends React.Component<ImageWithFallbacksProps, ImageWithFallbacksState> {\n  constructor(props: ImageWithFallbacksProps) {\n    super(props);\n    this.state = {\n      src: props.src,\n      fallbackIndex: 0,\n      fallbacks: this.props.fallbacks.split('|'),\n      loaded: false,\n    };\n  }\n  componentDidUpdate(prevProps: ImageWithFallbacksProps) {\n    if (prevProps.src !== this.props.src && prevProps.fallbacks !== this.props.fallbacks) {\n      this.setState({\n        src: this.props.src,\n        fallbackIndex: 0,\n        fallbacks: this.props.fallbacks.split('|'),\n        loaded: false,\n      });\n    }\n  }\n  onError() {\n    if (this.state.fallbackIndex > this.state.fallbacks.length) {\n      return;\n    }\n    this.setState({\n      src: this.state.fallbacks[this.state.fallbackIndex],\n      fallbackIndex: this.state.fallbackIndex + 1,\n      fallbacks: this.state.fallbacks,\n    });\n  }\n  onLoad() {\n    this.setState({ ...this.state, loaded: true });\n  }\n  render() {\n    const {src, alt, fallbacks, loader, loading, ...rest} = this.props;\n    return (\n      <>\n        <img src={this.state.src}\n             onError={() => this.onError()}\n             onChange={() => this.onLoad()}\n             onLoad={() => this.onLoad()}\n             alt={this.props.alt}\n             {...rest}/>\n        {this.props.loader && !this.state.loaded && <LoadingIndicator id=\"imgWithFallbackLoadingIndicator\"></LoadingIndicator>}\n      </>\n    );\n  }\n}\n\nexport default ImageWithFallbacks;\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AACA;AAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgBpBA,kBAAkB;EAAA;EAAA;EACtB,4BAAYC,KAA8B,EAAE;IAAA;IAAA;IAC1C,0BAAMA,KAAK;IACX,MAAKC,KAAK,GAAG;MACXC,GAAG,EAAEF,KAAK,CAACE,GAAG;MACdC,aAAa,EAAE,CAAC;MAChBC,SAAS,EAAE,MAAKJ,KAAK,CAACI,SAAS,CAACC,KAAK,CAAC,GAAG,CAAC;MAC1CC,MAAM,EAAE;IACV,CAAC;IAAC;EACJ;EAAC;IAAA;IAAA,OACD,4BAAmBC,SAAkC,EAAE;MACrD,IAAIA,SAAS,CAACL,GAAG,KAAK,IAAI,CAACF,KAAK,CAACE,GAAG,IAAIK,SAAS,CAACH,SAAS,KAAK,IAAI,CAACJ,KAAK,CAACI,SAAS,EAAE;QACpF,IAAI,CAACI,QAAQ,CAAC;UACZN,GAAG,EAAE,IAAI,CAACF,KAAK,CAACE,GAAG;UACnBC,aAAa,EAAE,CAAC;UAChBC,SAAS,EAAE,IAAI,CAACJ,KAAK,CAACI,SAAS,CAACC,KAAK,CAAC,GAAG,CAAC;UAC1CC,MAAM,EAAE;QACV,CAAC,CAAC;MACJ;IACF;EAAC;IAAA;IAAA,OACD,mBAAU;MACR,IAAI,IAAI,CAACL,KAAK,CAACE,aAAa,GAAG,IAAI,CAACF,KAAK,CAACG,SAAS,CAACK,MAAM,EAAE;QAC1D;MACF;MACA,IAAI,CAACD,QAAQ,CAAC;QACZN,GAAG,EAAE,IAAI,CAACD,KAAK,CAACG,SAAS,CAAC,IAAI,CAACH,KAAK,CAACE,aAAa,CAAC;QACnDA,aAAa,EAAE,IAAI,CAACF,KAAK,CAACE,aAAa,GAAG,CAAC;QAC3CC,SAAS,EAAE,IAAI,CAACH,KAAK,CAACG;MACxB,CAAC,CAAC;IACJ;EAAC;IAAA;IAAA,OACD,kBAAS;MACP,IAAI,CAACI,QAAQ,iCAAM,IAAI,CAACP,KAAK;QAAEK,MAAM,EAAE;MAAI,GAAG;IAChD;EAAC;IAAA;IAAA,OACD,kBAAS;MAAA;MACP,kBAAwD,IAAI,CAACN,KAAK;QAA3DE,GAAG,eAAHA,GAAG;QAAEQ,GAAG,eAAHA,GAAG;QAAEN,SAAS,eAATA,SAAS;QAAEO,MAAM,eAANA,MAAM;QAAEC,OAAO,eAAPA,OAAO;QAAKC,IAAI;MACpD,oBACE;QAAA,wBACE;UAAK,GAAG,EAAE,IAAI,CAACZ,KAAK,CAACC,GAAI;UACpB,OAAO,EAAE;YAAA,OAAM,MAAI,CAACY,OAAO,EAAE;UAAA,CAAC;UAC9B,QAAQ,EAAE;YAAA,OAAM,MAAI,CAACC,MAAM,EAAE;UAAA,CAAC;UAC9B,MAAM,EAAE;YAAA,OAAM,MAAI,CAACA,MAAM,EAAE;UAAA,CAAC;UAC5B,GAAG,EAAE,IAAI,CAACf,KAAK,CAACU;QAAI,GAChBG,IAAI,EAAG,EACf,IAAI,CAACb,KAAK,CAACW,MAAM,IAAI,CAAC,IAAI,CAACV,KAAK,CAACK,MAAM,iBAAI,qBAAC,kBAAgB;UAAC,EAAE,EAAC;QAAiC,EAAoB;MAAA,EACrH;IAEP;EAAC;EAAA;AAAA,EA9C8BU,cAAK,CAACC,SAAS;AAAA,8BAA1ClB,kBAAkB;EAbtBK,SAAS;EACTF,GAAG;EACHQ,GAAG;EACHC,MAAM;AAAA;AAAA,eA2DOZ,kBAAkB;AAAA"}

package/dist/Image/ImageWithFallbacks.d.ts

@@ -1,21 +1,21 @@
-import React from 'react';
-export interface ImageWithFallbacksProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'onError' | 'onLoad' | 'onChange'> {
-    fallbacks: string;
-    src: string;
-    alt: string;
-    loader: boolean;
-}
-type ImageWithFallbacksState = {
-    src: string;
-    fallbackIndex: number;
-    fallbacks: string[];
-    loaded: boolean;
-};
-declare class ImageWithFallbacks extends React.Component<ImageWithFallbacksProps, ImageWithFallbacksState> {
-    constructor(props: ImageWithFallbacksProps);
-    componentDidUpdate(prevProps: ImageWithFallbacksProps): void;
-    onError(): void;
-    onLoad(): void;
-    render(): JSX.Element;
-}
-export default ImageWithFallbacks;
+import React from 'react';
+export interface ImageWithFallbacksProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'onError' | 'onLoad' | 'onChange'> {
+    fallbacks: string;
+    src: string;
+    alt: string;
+    loader: boolean;
+}
+type ImageWithFallbacksState = {
+    src: string;
+    fallbackIndex: number;
+    fallbacks: string[];
+    loaded: boolean;
+};
+declare class ImageWithFallbacks extends React.Component<ImageWithFallbacksProps, ImageWithFallbacksState> {
+    constructor(props: ImageWithFallbacksProps);
+    componentDidUpdate(prevProps: ImageWithFallbacksProps): void;
+    onError(): void;
+    onLoad(): void;
+    render(): JSX.Element;
+}
+export default ImageWithFallbacks;

package/dist/Image/ImageWithFallbacks.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageWithFallbacks.js","names":["LoadingIndicator","React","ImageWithFallbacks","props","state","src","fallbackIndex","fallbacks","split","loaded","prevProps","setState","length","alt","loader","loading","rest","onError","onLoad","Component"],"sources":["../../src/Image/ImageWithFallbacks.tsx"],"sourcesContent":["import { LoadingIndicator } from '..';\r\nimport React from 'react';\r\n\r\nexport interface ImageWithFallbacksProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'onError' | 'onLoad' | 'onChange'>{\r\n  fallbacks: string;\r\n  src: string;\r\n  alt: string;\r\n  loader: boolean;\r\n}\r\n\r\ntype ImageWithFallbacksState = {\r\n  src: string;\r\n  fallbackIndex: number;\r\n  fallbacks: string[];\r\n  loaded: boolean;\r\n};\r\n\r\nclass ImageWithFallbacks extends React.Component<ImageWithFallbacksProps, ImageWithFallbacksState> {\r\n  constructor(props: ImageWithFallbacksProps) {\r\n    super(props);\r\n    this.state = {\r\n      src: props.src,\r\n      fallbackIndex: 0,\r\n      fallbacks: this.props.fallbacks.split('|'),\r\n      loaded: false,\r\n    };\r\n  }\r\n  componentDidUpdate(prevProps: ImageWithFallbacksProps) {\r\n    if (prevProps.src !== this.props.src && prevProps.fallbacks !== this.props.fallbacks) {\r\n      this.setState({\r\n        src: this.props.src,\r\n        fallbackIndex: 0,\r\n        fallbacks: this.props.fallbacks.split('|'),\r\n        loaded: false,\r\n      });\r\n    }\r\n  }\r\n  onError() {\r\n    if (this.state.fallbackIndex > this.state.fallbacks.length) {\r\n      return;\r\n    }\r\n    this.setState({\r\n      src: this.state.fallbacks[this.state.fallbackIndex],\r\n      fallbackIndex: this.state.fallbackIndex + 1,\r\n      fallbacks: this.state.fallbacks,\r\n    });\r\n  }\r\n  onLoad() {\r\n    this.setState({ ...this.state, loaded: true });\r\n  }\r\n  render() {\r\n    const {src, alt, fallbacks, loader, loading, ...rest} = this.props;\r\n    return (\r\n      <>\r\n        <img src={this.state.src}\r\n             onError={() => this.onError()}\r\n             onChange={() => this.onLoad()}\r\n             onLoad={() => this.onLoad()}\r\n             alt={this.props.alt}\r\n             {...rest}/>\r\n        {this.props.loader && !this.state.loaded && <LoadingIndicator id=\"imgWithFallbackLoadingIndicator\"></LoadingIndicator>}\r\n      </>\r\n    );\r\n  }\r\n}\r\n\r\nexport default ImageWithFallbacks;\r\n"],"mappings":";;;;;;;;;;;;;AAAA,SAASA,gBAAgB,QAAQ,IAAI;AACrC,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA;AAAA;AAAA,IAgBpBC,kBAAkB;EAAA;EAAA;EACtB,4BAAYC,KAA8B,EAAE;IAAA;IAAA;IAC1C,0BAAMA,KAAK;IACX,MAAKC,KAAK,GAAG;MACXC,GAAG,EAAEF,KAAK,CAACE,GAAG;MACdC,aAAa,EAAE,CAAC;MAChBC,SAAS,EAAE,MAAKJ,KAAK,CAACI,SAAS,CAACC,KAAK,CAAC,GAAG,CAAC;MAC1CC,MAAM,EAAE;IACV,CAAC;IAAC;EACJ;EAAC;IAAA;IAAA,OACD,4BAAmBC,SAAkC,EAAE;MACrD,IAAIA,SAAS,CAACL,GAAG,KAAK,IAAI,CAACF,KAAK,CAACE,GAAG,IAAIK,SAAS,CAACH,SAAS,KAAK,IAAI,CAACJ,KAAK,CAACI,SAAS,EAAE;QACpF,IAAI,CAACI,QAAQ,CAAC;UACZN,GAAG,EAAE,IAAI,CAACF,KAAK,CAACE,GAAG;UACnBC,aAAa,EAAE,CAAC;UAChBC,SAAS,EAAE,IAAI,CAACJ,KAAK,CAACI,SAAS,CAACC,KAAK,CAAC,GAAG,CAAC;UAC1CC,MAAM,EAAE;QACV,CAAC,CAAC;MACJ;IACF;EAAC;IAAA;IAAA,OACD,mBAAU;MACR,IAAI,IAAI,CAACL,KAAK,CAACE,aAAa,GAAG,IAAI,CAACF,KAAK,CAACG,SAAS,CAACK,MAAM,EAAE;QAC1D;MACF;MACA,IAAI,CAACD,QAAQ,CAAC;QACZN,GAAG,EAAE,IAAI,CAACD,KAAK,CAACG,SAAS,CAAC,IAAI,CAACH,KAAK,CAACE,aAAa,CAAC;QACnDA,aAAa,EAAE,IAAI,CAACF,KAAK,CAACE,aAAa,GAAG,CAAC;QAC3CC,SAAS,EAAE,IAAI,CAACH,KAAK,CAACG;MACxB,CAAC,CAAC;IACJ;EAAC;IAAA;IAAA,OACD,kBAAS;MACP,IAAI,CAACI,QAAQ,iCAAM,IAAI,CAACP,KAAK;QAAEK,MAAM,EAAE;MAAI,GAAG;IAChD;EAAC;IAAA;IAAA,OACD,kBAAS;MAAA;MACP,kBAAwD,IAAI,CAACN,KAAK;QAA3DE,GAAG,eAAHA,GAAG;QAAEQ,GAAG,eAAHA,GAAG;QAAEN,SAAS,eAATA,SAAS;QAAEO,MAAM,eAANA,MAAM;QAAEC,OAAO,eAAPA,OAAO;QAAKC,IAAI;MACpD,oBACE;QAAA,wBACE;UAAK,GAAG,EAAE,IAAI,CAACZ,KAAK,CAACC,GAAI;UACpB,OAAO,EAAE;YAAA,OAAM,MAAI,CAACY,OAAO,EAAE;UAAA,CAAC;UAC9B,QAAQ,EAAE;YAAA,OAAM,MAAI,CAACC,MAAM,EAAE;UAAA,CAAC;UAC9B,MAAM,EAAE;YAAA,OAAM,MAAI,CAACA,MAAM,EAAE;UAAA,CAAC;UAC5B,GAAG,EAAE,IAAI,CAACf,KAAK,CAACU;QAAI,GAChBG,IAAI,EAAG,EACf,IAAI,CAACb,KAAK,CAACW,MAAM,IAAI,CAAC,IAAI,CAACV,KAAK,CAACK,MAAM,iBAAI,KAAC,gBAAgB;UAAC,EAAE,EAAC;QAAiC,EAAoB;MAAA,EACrH;IAEP;EAAC;EAAA;AAAA,EA9C8BR,KAAK,CAACkB,SAAS;AAAA,gBAA1CjB,kBAAkB;EAbtBK,SAAS;EACTF,GAAG;EACHQ,GAAG;EACHC,MAAM;AAAA;AA2DR,eAAeZ,kBAAkB"}
+{"version":3,"file":"ImageWithFallbacks.js","names":["LoadingIndicator","React","ImageWithFallbacks","props","state","src","fallbackIndex","fallbacks","split","loaded","prevProps","setState","length","alt","loader","loading","rest","onError","onLoad","Component"],"sources":["../../src/Image/ImageWithFallbacks.tsx"],"sourcesContent":["import { LoadingIndicator } from '..';\nimport React from 'react';\n\nexport interface ImageWithFallbacksProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'alt' | 'onError' | 'onLoad' | 'onChange'>{\n  fallbacks: string;\n  src: string;\n  alt: string;\n  loader: boolean;\n}\n\ntype ImageWithFallbacksState = {\n  src: string;\n  fallbackIndex: number;\n  fallbacks: string[];\n  loaded: boolean;\n};\n\nclass ImageWithFallbacks extends React.Component<ImageWithFallbacksProps, ImageWithFallbacksState> {\n  constructor(props: ImageWithFallbacksProps) {\n    super(props);\n    this.state = {\n      src: props.src,\n      fallbackIndex: 0,\n      fallbacks: this.props.fallbacks.split('|'),\n      loaded: false,\n    };\n  }\n  componentDidUpdate(prevProps: ImageWithFallbacksProps) {\n    if (prevProps.src !== this.props.src && prevProps.fallbacks !== this.props.fallbacks) {\n      this.setState({\n        src: this.props.src,\n        fallbackIndex: 0,\n        fallbacks: this.props.fallbacks.split('|'),\n        loaded: false,\n      });\n    }\n  }\n  onError() {\n    if (this.state.fallbackIndex > this.state.fallbacks.length) {\n      return;\n    }\n    this.setState({\n      src: this.state.fallbacks[this.state.fallbackIndex],\n      fallbackIndex: this.state.fallbackIndex + 1,\n      fallbacks: this.state.fallbacks,\n    });\n  }\n  onLoad() {\n    this.setState({ ...this.state, loaded: true });\n  }\n  render() {\n    const {src, alt, fallbacks, loader, loading, ...rest} = this.props;\n    return (\n      <>\n        <img src={this.state.src}\n             onError={() => this.onError()}\n             onChange={() => this.onLoad()}\n             onLoad={() => this.onLoad()}\n             alt={this.props.alt}\n             {...rest}/>\n        {this.props.loader && !this.state.loaded && <LoadingIndicator id=\"imgWithFallbackLoadingIndicator\"></LoadingIndicator>}\n      </>\n    );\n  }\n}\n\nexport default ImageWithFallbacks;\n"],"mappings":";;;;;;;;;;;;;AAAA,SAASA,gBAAgB,QAAQ,IAAI;AACrC,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA;AAAA;AAAA,IAgBpBC,kBAAkB;EAAA;EAAA;EACtB,4BAAYC,KAA8B,EAAE;IAAA;IAAA;IAC1C,0BAAMA,KAAK;IACX,MAAKC,KAAK,GAAG;MACXC,GAAG,EAAEF,KAAK,CAACE,GAAG;MACdC,aAAa,EAAE,CAAC;MAChBC,SAAS,EAAE,MAAKJ,KAAK,CAACI,SAAS,CAACC,KAAK,CAAC,GAAG,CAAC;MAC1CC,MAAM,EAAE;IACV,CAAC;IAAC;EACJ;EAAC;IAAA;IAAA,OACD,4BAAmBC,SAAkC,EAAE;MACrD,IAAIA,SAAS,CAACL,GAAG,KAAK,IAAI,CAACF,KAAK,CAACE,GAAG,IAAIK,SAAS,CAACH,SAAS,KAAK,IAAI,CAACJ,KAAK,CAACI,SAAS,EAAE;QACpF,IAAI,CAACI,QAAQ,CAAC;UACZN,GAAG,EAAE,IAAI,CAACF,KAAK,CAACE,GAAG;UACnBC,aAAa,EAAE,CAAC;UAChBC,SAAS,EAAE,IAAI,CAACJ,KAAK,CAACI,SAAS,CAACC,KAAK,CAAC,GAAG,CAAC;UAC1CC,MAAM,EAAE;QACV,CAAC,CAAC;MACJ;IACF;EAAC;IAAA;IAAA,OACD,mBAAU;MACR,IAAI,IAAI,CAACL,KAAK,CAACE,aAAa,GAAG,IAAI,CAACF,KAAK,CAACG,SAAS,CAACK,MAAM,EAAE;QAC1D;MACF;MACA,IAAI,CAACD,QAAQ,CAAC;QACZN,GAAG,EAAE,IAAI,CAACD,KAAK,CAACG,SAAS,CAAC,IAAI,CAACH,KAAK,CAACE,aAAa,CAAC;QACnDA,aAAa,EAAE,IAAI,CAACF,KAAK,CAACE,aAAa,GAAG,CAAC;QAC3CC,SAAS,EAAE,IAAI,CAACH,KAAK,CAACG;MACxB,CAAC,CAAC;IACJ;EAAC;IAAA;IAAA,OACD,kBAAS;MACP,IAAI,CAACI,QAAQ,iCAAM,IAAI,CAACP,KAAK;QAAEK,MAAM,EAAE;MAAI,GAAG;IAChD;EAAC;IAAA;IAAA,OACD,kBAAS;MAAA;MACP,kBAAwD,IAAI,CAACN,KAAK;QAA3DE,GAAG,eAAHA,GAAG;QAAEQ,GAAG,eAAHA,GAAG;QAAEN,SAAS,eAATA,SAAS;QAAEO,MAAM,eAANA,MAAM;QAAEC,OAAO,eAAPA,OAAO;QAAKC,IAAI;MACpD,oBACE;QAAA,wBACE;UAAK,GAAG,EAAE,IAAI,CAACZ,KAAK,CAACC,GAAI;UACpB,OAAO,EAAE;YAAA,OAAM,MAAI,CAACY,OAAO,EAAE;UAAA,CAAC;UAC9B,QAAQ,EAAE;YAAA,OAAM,MAAI,CAACC,MAAM,EAAE;UAAA,CAAC;UAC9B,MAAM,EAAE;YAAA,OAAM,MAAI,CAACA,MAAM,EAAE;UAAA,CAAC;UAC5B,GAAG,EAAE,IAAI,CAACf,KAAK,CAACU;QAAI,GAChBG,IAAI,EAAG,EACf,IAAI,CAACb,KAAK,CAACW,MAAM,IAAI,CAAC,IAAI,CAACV,KAAK,CAACK,MAAM,iBAAI,KAAC,gBAAgB;UAAC,EAAE,EAAC;QAAiC,EAAoB;MAAA,EACrH;IAEP;EAAC;EAAA;AAAA,EA9C8BR,KAAK,CAACkB,SAAS;AAAA,gBAA1CjB,kBAAkB;EAbtBK,SAAS;EACTF,GAAG;EACHQ,GAAG;EACHC,MAAM;AAAA;AA2DR,eAAeZ,kBAAkB"}

package/dist/Image/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Image/index.tsx"],"sourcesContent":["import ImageWithFallbacks from './ImageWithFallbacks';\r\n\r\nexport { ImageWithFallbacks };\r\n"],"mappings":";;;;;;;;;;;;AAAA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Image/index.tsx"],"sourcesContent":["import ImageWithFallbacks from './ImageWithFallbacks';\n\nexport { ImageWithFallbacks };\n"],"mappings":";;;;;;;;;;;;AAAA"}

package/dist/Image/index.d.ts

@@ -1,2 +1,2 @@
-import ImageWithFallbacks from './ImageWithFallbacks';
-export { ImageWithFallbacks };
+import ImageWithFallbacks from './ImageWithFallbacks';
+export { ImageWithFallbacks };

package/dist/Image/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ImageWithFallbacks"],"sources":["../../src/Image/index.tsx"],"sourcesContent":["import ImageWithFallbacks from './ImageWithFallbacks';\r\n\r\nexport { ImageWithFallbacks };\r\n"],"mappings":"AAAA,OAAOA,kBAAkB,MAAM,sBAAsB;AAErD,SAASA,kBAAkB"}
+{"version":3,"file":"index.js","names":["ImageWithFallbacks"],"sources":["../../src/Image/index.tsx"],"sourcesContent":["import ImageWithFallbacks from './ImageWithFallbacks';\n\nexport { ImageWithFallbacks };\n"],"mappings":"AAAA,OAAOA,kBAAkB,MAAM,sBAAsB;AAErD,SAASA,kBAAkB"}

package/dist/InputFields/Checkbox.cjs

@@ -75,7 +75,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, rest), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       id: id,
-      "data-testId": dataTestId,
+      "data-testid": dataTestId,
       className: 'checkbox-icon',
       children: selected ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.CheckboxOn, {
         className: iconPointerEventsTransparent ? 'pointerTransparent' : '',

package/dist/InputFields/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","invalid","critical_400","neutral_600","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","onKeyPress","e","keyCode","handleClick","Size","Medium","cls","defaultOnMouseDownHandler"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport { CheckboxProps } from './types';\r\n\r\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: boolean; selected?: boolean; margin?: string }>`\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n\r\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\r\n  cursor: pointer;\r\n\r\n  color: ${COLORS.black};\r\n\r\n  .pointerTransparent {\r\n    pointer-events: none;\r\n  }\r\n\r\n  .checkbox-icon {\r\n    margin: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    height: 36px;\r\n    min-width: 36px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\r\n    }\r\n  }\r\n\r\n  .checkbox-label {\r\n    user-select: none;\r\n    cursor: inherit;\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .checkbox-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):hover {\r\n    .checkbox-icon {\r\n      background-color: ${COLORS.primary_20};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_700};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):active {\r\n    .checkbox-icon {\r\n      background: ${COLORS.primary_100};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_800};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    cursor: inherit;\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    color: ${COLORS.neutral_300};\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .checkbox-icon {\r\n      background-color: ${COLORS.white};\r\n    }\r\n\r\n    .checkbox-icon svg {\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n\r\n  &.dropdown-hover:not(.disabled) {\r\n    .checkbox-icon {\r\n      background-color: ${COLORS.primary_20};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_700};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\r\n                                                            id,\r\n                                                            selected,\r\n                                                            select,\r\n                                                            label,\r\n                                                            invalid,\r\n                                                            iconPointerEventsTransparent,\r\n                                                            disabled,\r\n                                                            margin,\r\n                                                            size,\r\n                                                            semiSelected,\r\n                                                            children,\r\n                                                            readOnly,\r\n                                                            tabIndexVal,\r\n                                                            dataTestId,\r\n                                                            className,\r\n                                                            ...rest\r\n                                                          }, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled && !readOnly) {\r\n      select && select(!selected);\r\n    }\r\n  };\r\n\r\n  const handleClick = () => {\r\n    if (disabled || readOnly) {\r\n      return;\r\n    }\r\n    select && select(!selected);\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\r\n\r\n  return (\r\n    <StyledCheckBox key={id}\r\n                    ref={ref}\r\n                    disabled={disabled}\r\n                    className={cls}\r\n                    aria-checked={selected}\r\n                    selected={selected}\r\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                    invalid={invalid}\r\n                    margin={margin}\r\n                    onClick={handleClick}\r\n                    onKeyDown={onKeyPress}\r\n                    onMouseDown={defaultOnMouseDownHandler}\r\n                    {...rest}>\r\n      <div id={id} data-testId={dataTestId} className={'checkbox-icon'}>\r\n        {\r\n          selected\r\n            ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n            : semiSelected\r\n              ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n              : <SystemIcons.CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n        }\r\n      </div>\r\n      {\r\n        label &&\r\n        (\r\n          <label className={'checkbox-label'}\r\n                 htmlFor={id}>\r\n            {label}\r\n          </label>\r\n        )\r\n      }\r\n      {\r\n        !label &&\r\n        <label className={'checkbox-label'}\r\n               htmlFor={id}>\r\n          {children}\r\n        </label>\r\n      }\r\n    </StyledCheckBox>\r\n  );\r\n});\r\n\r\nexport default Checkbox;\r\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.cjs","names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","invalid","critical_400","neutral_600","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","onKeyPress","e","keyCode","handleClick","Size","Medium","cls","defaultOnMouseDownHandler"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {SystemIcons} from '../icons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\nimport { CheckboxProps } from './types';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: 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.invalid ? COLORS.critical_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):not(.readonly):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):not(.readonly):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):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\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  &.dropdown-hover:not(.disabled) {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            invalid,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readOnly,\n                                                            tabIndexVal,\n                                                            dataTestId,\n                                                            className,\n                                                            ...rest\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readOnly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readOnly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={cls}\n                    aria-checked={selected}\n                    selected={selected}\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                    invalid={invalid}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={defaultOnMouseDownHandler}\n                    {...rest}>\n      <div id={id} data-testid={dataTestId} className={'checkbox-icon'}>\n        {\n          selected\n            ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n            : semiSelected\n              ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n              : <SystemIcons.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"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAoD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAG7C,IAAMA,cAAc,GAAGC,yBAAM,CAACC,GAAG,yuDAMpC,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM,qBAAcD,KAAK,CAACC,MAAM,SAAM,EAAE;AAAA,CAAC,EAGlDC,cAAM,CAACC,KAAK,EAiBR,UAAAH,KAAK;EAAA,OAAKA,KAAK,CAACI,QAAQ,GAAGF,cAAM,CAACG,WAAW,GAAGL,KAAK,CAACM,OAAO,GAAGJ,cAAM,CAACK,YAAY,GAAGL,cAAM,CAACM,WAAW;AAAA,CAAC,EAUlH,IAAAC,6BAAiB,EAACC,0BAAkB,CAACC,OAAO,EAAET,cAAM,CAACC,KAAK,CAAC,EAO3D,IAAAS,6BAAiB,EAACF,0BAAkB,CAACC,OAAO,EAAET,cAAM,CAACC,KAAK,CAAC,EAO3D,IAAAU,6BAAiB,EAACH,0BAAkB,CAACC,OAAO,EAAET,cAAM,CAACC,KAAK,CAAC,EAO3DW,mBAAW,EAKSZ,cAAM,CAACa,UAAU,EAG1Bb,cAAM,CAACc,WAAW,EAOfd,cAAM,CAACe,WAAW,EAGrBf,cAAM,CAACgB,WAAW,EAiBtBhB,cAAM,CAACiB,WAAW,EAQLjB,cAAM,CAACkB,KAAK,EAIvBlB,cAAM,CAACiB,WAAW,EAMPjB,cAAM,CAACa,UAAU,EAG1Bb,cAAM,CAACc,WAAW,CAIlC;AAAC;AAEF,IAAMK,QAAQ,gBAAGC,KAAK,CAACC,UAAU,CAAgC,gBAiBJC,GAAG,EAAK;EAAA;EAAA,IAhBTC,EAAE,QAAFA,EAAE;IACFrB,QAAQ,QAARA,QAAQ;IACRsB,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLrB,OAAO,QAAPA,OAAO;IACPsB,4BAA4B,QAA5BA,4BAA4B;IAC5BC,QAAQ,QAARA,QAAQ;IACR5B,MAAM,QAANA,MAAM;IACN6B,IAAI,QAAJA,IAAI;IACJC,YAAY,QAAZA,YAAY;IACZC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IACXC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,IAAI;EAEjE,IAAMC,UAAU,GAAG,SAAbA,UAAU,CAAIC,CAAM,EAAK;IAC7B,IAAIA,CAAC,CAACC,OAAO,KAAK,EAAE,IAAI,CAACX,QAAQ,IAAI,CAACI,QAAQ,EAAE;MAC9CP,MAAM,IAAIA,MAAM,CAAC,CAACtB,QAAQ,CAAC;IAC7B;EACF,CAAC;EAED,IAAMqC,WAAW,GAAG,SAAdA,WAAW,GAAS;IACxB,IAAIZ,QAAQ,IAAII,QAAQ,EAAE;MACxB;IACF;IACAP,MAAM,IAAIA,MAAM,CAAC,CAACtB,QAAQ,CAAC;EAC7B,CAAC;EAED0B,IAAI,YAAGA,IAAI,yCAAIY,WAAI,CAACC,MAAM;EAE1B,IAAMC,GAAG,aAAMd,IAAI,cAAIM,SAAS,IAAI,EAAE,cAAIP,QAAQ,GAAG,WAAW,GAAG,EAAE,cAAII,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAE;EAEtG,oBACE,sBAAC,cAAc;IACC,GAAG,EAAET,GAAI;IACT,QAAQ,EAAEK,QAAS;IACnB,SAAS,EAAEe,GAAI;IACf,gBAAcxC,QAAS;IACvB,QAAQ,EAAEA,QAAS;IACnB,QAAQ,EAAEyB,QAAQ,IAAII,QAAQ,GAAG,CAAC,CAAC,GAAIC,WAAW,GAAGA,WAAW,GAAG,CAAG;IACtE,OAAO,EAAE5B,OAAQ;IACjB,MAAM,EAAEL,MAAO;IACf,OAAO,EAAEwC,WAAY;IACrB,SAAS,EAAEH,UAAW;IACtB,WAAW,EAAEO;EAA0B,GACnCR,IAAI;IAAA,wBACtB;MAAK,EAAE,EAAEZ,EAAG;MAAC,eAAaU,UAAW;MAAC,SAAS,EAAE,eAAgB;MAAA,UAE7D/B,QAAQ,gBACJ,qBAAC,kBAAW,CAAC,UAAU;QAAC,SAAS,EAAEwB,4BAA4B,GAAG,oBAAoB,GAAG,EAAG;QAAC,IAAI,EAAC;MAAM,EAAE,GAC1GG,YAAY,gBACV,qBAAC,kBAAW,CAAC,YAAY;QAAC,SAAS,EAAEH,4BAA4B,GAAG,oBAAoB,GAAG,EAAG;QAAC,IAAI,EAAC;MAAM,EAAE,gBAC5G,qBAAC,kBAAW,CAAC,WAAW;QAAC,SAAS,EAAEA,4BAA4B,GAAG,oBAAoB,GAAG,EAAG;QAAC,IAAI,EAAC;MAAM;IAAE,EAE/G,EAEJD,KAAK,iBAEH;MAAO,SAAS,EAAE,gBAAiB;MAC5B,OAAO,EAAEF,EAAG;MAAA,UAChBE;IAAK,EAET,EAGD,CAACA,KAAK,iBACN;MAAO,SAAS,EAAE,gBAAiB;MAC5B,OAAO,EAAEF,EAAG;MAAA,UAChBO;IAAQ,EACH;EAAA,IApCSP,EAAE,CAsCN;AAErB,CAAC,CAAC;AAAC,eAEYJ,QAAQ;AAAA"}

package/dist/InputFields/Checkbox.d.ts

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import { CheckboxProps } from './types';
-export declare const StyledCheckBox: import("styled-components").StyledComponent<"div", any, {
-    disabled?: boolean | undefined;
-    invalid?: boolean | undefined;
-    selected?: boolean | undefined;
-    margin?: string | undefined;
-}, never>;
-declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLDivElement>>;
-export default Checkbox;
+import * as React from 'react';
+import { CheckboxProps } from './types';
+export declare const StyledCheckBox: import("styled-components").StyledComponent<"div", any, {
+    disabled?: boolean | undefined;
+    invalid?: boolean | undefined;
+    selected?: boolean | undefined;
+    margin?: string | undefined;
+}, never>;
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLDivElement>>;
+export default Checkbox;

package/dist/InputFields/Checkbox.js

@@ -65,7 +65,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, rest), {}, {
     children: [/*#__PURE__*/_jsx("div", {
       id: id,
-      "data-testId": dataTestId,
+      "data-testid": dataTestId,
       className: 'checkbox-icon',
       children: selected ? /*#__PURE__*/_jsx(SystemIcons.CheckboxOn, {
         className: iconPointerEventsTransparent ? 'pointerTransparent' : '',

package/dist/InputFields/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","StyledCheckBox","div","props","margin","black","selected","primary_500","invalid","critical_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","onKeyPress","e","keyCode","handleClick","Medium","cls"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport { CheckboxProps } from './types';\r\n\r\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: boolean; selected?: boolean; margin?: string }>`\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n\r\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\r\n  cursor: pointer;\r\n\r\n  color: ${COLORS.black};\r\n\r\n  .pointerTransparent {\r\n    pointer-events: none;\r\n  }\r\n\r\n  .checkbox-icon {\r\n    margin: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    height: 36px;\r\n    min-width: 36px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\r\n    }\r\n  }\r\n\r\n  .checkbox-label {\r\n    user-select: none;\r\n    cursor: inherit;\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .checkbox-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):hover {\r\n    .checkbox-icon {\r\n      background-color: ${COLORS.primary_20};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_700};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):active {\r\n    .checkbox-icon {\r\n      background: ${COLORS.primary_100};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_800};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    cursor: inherit;\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    color: ${COLORS.neutral_300};\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .checkbox-icon {\r\n      background-color: ${COLORS.white};\r\n    }\r\n\r\n    .checkbox-icon svg {\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n\r\n  &.dropdown-hover:not(.disabled) {\r\n    .checkbox-icon {\r\n      background-color: ${COLORS.primary_20};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_700};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\r\n                                                            id,\r\n                                                            selected,\r\n                                                            select,\r\n                                                            label,\r\n                                                            invalid,\r\n                                                            iconPointerEventsTransparent,\r\n                                                            disabled,\r\n                                                            margin,\r\n                                                            size,\r\n                                                            semiSelected,\r\n                                                            children,\r\n                                                            readOnly,\r\n                                                            tabIndexVal,\r\n                                                            dataTestId,\r\n                                                            className,\r\n                                                            ...rest\r\n                                                          }, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled && !readOnly) {\r\n      select && select(!selected);\r\n    }\r\n  };\r\n\r\n  const handleClick = () => {\r\n    if (disabled || readOnly) {\r\n      return;\r\n    }\r\n    select && select(!selected);\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\r\n\r\n  return (\r\n    <StyledCheckBox key={id}\r\n                    ref={ref}\r\n                    disabled={disabled}\r\n                    className={cls}\r\n                    aria-checked={selected}\r\n                    selected={selected}\r\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                    invalid={invalid}\r\n                    margin={margin}\r\n                    onClick={handleClick}\r\n                    onKeyDown={onKeyPress}\r\n                    onMouseDown={defaultOnMouseDownHandler}\r\n                    {...rest}>\r\n      <div id={id} data-testId={dataTestId} className={'checkbox-icon'}>\r\n        {\r\n          selected\r\n            ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n            : semiSelected\r\n              ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n              : <SystemIcons.CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n        }\r\n      </div>\r\n      {\r\n        label &&\r\n        (\r\n          <label className={'checkbox-label'}\r\n                 htmlFor={id}>\r\n            {label}\r\n          </label>\r\n        )\r\n      }\r\n      {\r\n        !label &&\r\n        <label className={'checkbox-label'}\r\n               htmlFor={id}>\r\n          {children}\r\n        </label>\r\n      }\r\n    </StyledCheckBox>\r\n  );\r\n});\r\n\r\nexport default Checkbox;\r\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","StyledCheckBox","div","props","margin","black","selected","primary_500","invalid","critical_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","onKeyPress","e","keyCode","handleClick","Medium","cls"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {SystemIcons} from '../icons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\nimport { CheckboxProps } from './types';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: 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.invalid ? COLORS.critical_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):not(.readonly):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):not(.readonly):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):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\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  &.dropdown-hover:not(.disabled) {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            invalid,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readOnly,\n                                                            tabIndexVal,\n                                                            dataTestId,\n                                                            className,\n                                                            ...rest\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readOnly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readOnly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={cls}\n                    aria-checked={selected}\n                    selected={selected}\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                    invalid={invalid}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={defaultOnMouseDownHandler}\n                    {...rest}>\n      <div id={id} data-testid={dataTestId} className={'checkbox-icon'}>\n        {\n          selected\n            ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n            : semiSelected\n              ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n              : <SystemIcons.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"],"mappings":"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"}

package/dist/InputFields/DatepickerField.cjs

@@ -27,30 +27,29 @@ require("react-datepicker/dist/react-datepicker.css");
 var _common = require("../common");
 var _types = require("../types");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["disabled", "readOnly", "onChange", "invalid", "value", "validationMessage", "dateFormat", "autoComplete", "placeholder", "required", "yearPicker", "yearsBeforeCurrentDate", "yearsAfterCurrentDate", "margin", "onBlur", "showQuarterYearPicker", "id", "dataTestId"];
+var _excluded = ["disabled", "readOnly", "onChange", "invalid", "value", "validationMessage", "dateFormat", "autoComplete", "placeholder", "required", "yearPicker", "yearsBeforeCurrentDate", "yearsAfterCurrentDate", "margin", "overflowTooltipPosition", "onBlur", "showQuarterYearPicker", "id", "dataTestId"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 _dayjs.default.extend(_advancedFormat.default);
 _dayjs.default.extend(_quarterOfYear.default);
 
-/**
- * Import custom components.
+/**
+ * Import custom components.
  */
 
-/**
- * Add custom styles.
+/**
+ * Add custom styles.
  */
-var DatePickerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .react-datepicker-popper {\n    z-index: ", ";\n  }\n\n  .react-datepicker-popper[data-placement^=bottom] {\n    padding-top: 0px;\n  }\n\n  \n  .react-datepicker-popper[data-placement^=top] {\n    padding-bottom: 0px;\n  }\n\n  > div {\n    display: block;\n\n    ", "\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n    .react-datepicker__input-container{\n      z-index: 0;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 48px;\n      width: 48px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ", ";\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        ", "\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: ", ";\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ", ";\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ", ";\n      background: ", ";\n      height: ", ";\n      padding-top: 0px;\n    }\n\n    .react-datepicker-year-header {\n      height: 48px;\n      line-height: 48px !important;\n      align-items: center;\n\n      ", "\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ", "\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ", "\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__navigation-icon {\n      display: none;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ", "\n    }\n\n    .react-datepicker__year-text {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ", "\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n    }\n\n    .react-datepicker__day, .react-datepicker__quarter-text {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ", "\n      &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &.react-datepicker__quarter--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__day--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ", ";\n        background: ", ";\n\n        &:hover {\n          color: ", ";\n          background: ", ";\n        }\n\n        &:focus {\n          ", "\n        }\n      }\n    }\n  }\n"])), _styles.Z_INDEXES.dropdown, function (props) {
+var DatePickerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .react-datepicker-popper {\n    z-index: ", ";\n  }\n\n  .react-datepicker-popper[data-placement^=bottom] {\n    padding-top: 0px;\n  }\n\n  \n  .react-datepicker-popper[data-placement^=top] {\n    padding-bottom: 0px;\n  }\n\n  > div {\n    display: block;\n\n    ", "\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n    .react-datepicker__input-container{\n      z-index: 0;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 48px;\n      width: 48px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ", ";\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        ", "\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ", ";\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ", ";\n      background: ", ";\n      height: ", ";\n      padding-top: 0px;\n    }\n\n    .react-datepicker-year-header {\n      height: 48px;\n      line-height: 48px !important;\n      align-items: center;\n\n      ", "\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ", "\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ", "\n    }\n\n    .react-datepicker__quarter-wrapper{\n      width: 100%;\n      display: flex;\n      align-content: space-evenly;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 20px;\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__navigation-icon {\n      display: none;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ", "\n    }\n\n    \n\n    .react-datepicker__year-text {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ", "\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n    }\n\n    .react-datepicker__day, .react-datepicker__quarter-text {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      flex-grow: 1;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ", "\n      &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        flex-grow: 1;\n        font-weight: 400;\n        border: none;\n      }\n\n      &.react-datepicker__quarter--selected {\n        color: ", " !important;\n        flex-grow: 1;\n        background: ", " !important;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__day--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ", ";\n        background: ", ";\n\n        &:hover {\n          color: ", ";\n          background: ", ";\n        }\n\n        &:focus {\n          ", "\n        }\n      }\n    }\n  }\n"])), _styles.Z_INDEXES.dropdown, function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
-}, _colors.default.primary_20, _styles.focusStyles, function (props) {
-  return props.quarterPicker ? '198px' : '336px';
-}, _colors.default.neutral_20, _colors.default.neutral_200, _colors.default.neutral_20, function (props) {
+}, _colors.default.primary_20, _styles.focusStyles, _colors.default.neutral_20, _colors.default.neutral_200, _colors.default.neutral_20, function (props) {
   return !props.yearPicker ? '96px' : '54px';
 }, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors.default.neutral_600), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors.default.neutral_600), (0, _styles.scrollBarStyling)(_types.Size.Small), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.white, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.neutral_600, _colors.default.white, _colors.default.primary_700, _colors.default.primary_20, _styles.focusStyles, _colors.default.white, _colors.default.primary_500, _colors.default.white, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.neutral_600, _colors.default.white, _colors.default.white, _colors.default.primary_500, _colors.default.primary_700, _colors.default.primary_20, _styles.focusStyles, _colors.default.white, _colors.default.primary_500, _colors.default.neutral_700, _colors.default.neutral_100, _colors.default.primary_700, _colors.default.primary_20, _styles.focusStyles);
 var IconWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  pointer-events: none;\n  position: absolute;\n  left: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ", ";\n"])), +_styles.Z_INDEXES.focus + 1);
 var DatepickerRow = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
 var StyledInputFieldStyling = (0, _styledComponents.default)(_styling.InputFieldStyling)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding-left: 48px !important;\n  \n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n\n    cursor: pointer;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    background-color: ", ";\n    color: ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n  }\n  \n  &:disabled {\n    background-color: ", ";\n  }\n\n  & ~ ", "{\n    color: ", ";\n  }\n\n  &:hover ~ ", " {\n    color: ", ";\n  }\n\n  &:active ~ ", ", &.open ~ ", " {\n    color: ", ";\n  }\n\n  &[tabindex='-1'] ~ ", " {\n    color: ", ";\n  }\n"])), _colors.default.neutral_500, _colors.default.primary_300, _colors.default.primary_200, _colors.default.primary_700, _colors.default.primary_20, _colors.default.primary_700, _colors.default.primary_300, _colors.default.primary_100, _colors.default.primary_800, _colors.default.primary_800, _colors.default.white, IconWrapper, _colors.default.neutral_600, IconWrapper, _colors.default.primary_700, IconWrapper, IconWrapper, _colors.default.primary_800, IconWrapper, _colors.default.neutral_300);
+var quarterComponentsClassPrefix = 'react-datepicker__quarter-';
 var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var disabled = _ref.disabled,
     readOnly = _ref.readOnly,
@@ -66,6 +65,7 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     yearsBeforeCurrentDate = _ref.yearsBeforeCurrentDate,
     yearsAfterCurrentDate = _ref.yearsAfterCurrentDate,
     margin = _ref.margin,
+    overflowTooltipPosition = _ref.overflowTooltipPosition,
     onBlur = _ref.onBlur,
     showQuarterYearPicker = _ref.showQuarterYearPicker,
     id = _ref.id,
@@ -74,6 +74,7 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
   // Globally used variables within the component
   var inputRef = (0, _common.useFocusVisibleRef)();
   var datepickerRef = _react.default.useRef(null);
+  var focusedQuarterRef = _react.default.useRef(1);
   var _React$useState = _react.default.useState(-1),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     activeMonthPage = _React$useState2[0],
@@ -98,22 +99,87 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       return val.year() + ', Q' + val.quarter();
     } else return (0, _dayjs.default)(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');
   };
-  /**
-   * Format the date in a specific way.
+  /**
+   * Format the date in a specific way.
    */
   _react.default.useEffect(function () {
     if (value) inputRef.current.value = getFormattedValue();
   }, [value]);
+  function getQuarterItem(classname) {
+    var _datepickerRef$curren;
+    return (_datepickerRef$curren = datepickerRef.current) === null || _datepickerRef$curren === void 0 ? void 0 : _datepickerRef$curren.getElementsByClassName(quarterComponentsClassPrefix + classname)[0];
+  }
   _react.default.useEffect(function () {
     if (yearPickerMode) {
-      var _selectedDate$parentE;
+      var _datepickerRef$curren2, _selectedDate$parentE;
       //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'
       //we have to touch DOM directly
-      var selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0];
+      var selectedDate = (_datepickerRef$curren2 = datepickerRef.current) === null || _datepickerRef$curren2 === void 0 ? void 0 : _datepickerRef$curren2.getElementsByClassName('react-datepicker__year-text--selected')[0];
       var dropdownParent = selectedDate === null || selectedDate === void 0 ? void 0 : (_selectedDate$parentE = selectedDate.parentElement) === null || _selectedDate$parentE === void 0 ? void 0 : _selectedDate$parentE.parentElement;
       if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;
     }
   }, [yearPickerMode]);
+  _react.default.useEffect(function () {
+    if (showQuarterYearPicker && open) {
+      var wrapper = getQuarterItem('wrapper');
+      var handler = function handler(event) {
+        switch (event.key) {
+          case ' ':
+          case 'Enter':
+            var currentQ = getQuarterItem(focusedQuarterRef.current + '');
+            currentQ.click();
+            break;
+          case 'ArrowLeft':
+            if (focusedQuarterRef.current > 1) {
+              var _currentQ = getQuarterItem(focusedQuarterRef.current + '');
+              var previousQ = getQuarterItem(focusedQuarterRef.current - 1 + '');
+              if (previousQ) {
+                _currentQ.tabIndex = -1;
+                previousQ.tabIndex = 0;
+                previousQ.focus();
+                focusedQuarterRef.current = focusedQuarterRef.current - 1;
+              }
+            }
+            break;
+          case 'ArrowRight':
+            if (focusedQuarterRef.current < 4) {
+              var _currentQ2 = getQuarterItem(focusedQuarterRef.current + '');
+              var nextQ = getQuarterItem(focusedQuarterRef.current + 1 + '');
+              if (nextQ) {
+                _currentQ2.tabIndex = -1;
+                nextQ.tabIndex = 0;
+                nextQ.focus();
+                focusedQuarterRef.current = focusedQuarterRef.current + 1;
+              }
+            }
+            break;
+        }
+      };
+      wrapper.addEventListener('keydown', handler);
+      //unfortunately since there are no efs, and quarter picker is rendered not by our code, but by 'react-datepicker'
+      //we have to touch DOM directly
+
+      var selectedQuarter = getQuarterItem('-selected');
+      if (selectedQuarter) {
+        for (var i = 1; i < 5; i++) {
+          if (selectedQuarter.innerText.includes('Q' + i)) {
+            focusedQuarterRef.current = i;
+            break;
+          }
+        }
+        selectedQuarter.setAttribute("tabIndex", "0");
+      } else {
+        var firstQuarter = getQuarterItem('1');
+        if (firstQuarter) {
+          focusedQuarterRef.current = 1;
+          firstQuarter.setAttribute("tabIndex", "0");
+        }
+      }
+      return function () {
+        wrapper.removeEventListener('keydown', handler);
+      };
+    }
+  }, [showQuarterYearPicker, open]);
 
   //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection
   //otherwise after year selection datepicker will show January month of the selected year
@@ -155,7 +221,7 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DatePickerContainer, {
       quarterPicker: showQuarterYearPicker,
-      "data-testId": dataTestId,
+      "data-testid": dataTestId,
       yearPicker: yearPickerMode,
       margin: margin || '',
       onBlur: handleBlur,
@@ -230,12 +296,12 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
               })
             })]
           }), !open && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipOverflow.default, {
+            position: overflowTooltipPosition,
             input: inputRef,
             withArrow: true,
             maxWidth: "100%",
             size: _types.Size.Small,
             align: "end",
-            position: "bottom",
             children: getFormattedValue()
           })]
         })
@@ -262,7 +328,8 @@ DatepickerField.propTypes = {
   yearPicker: _propTypes.default.bool,
   yearsBeforeCurrentDate: _propTypes.default.number,
   yearsAfterCurrentDate: _propTypes.default.number,
-  margin: _propTypes.default.string
+  margin: _propTypes.default.string,
+  overflowTooltipPosition: _propTypes.default.oneOf(['top', 'bottom'])
 };
 var _default = DatepickerField;
 exports.default = _default;