2.12.1 (#718)

packages/react-qr/src/Display.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import styled from 'styled-components';
+import styledComponents from 'styled-components';
 
 import { objectSpread } from '@polkadot/util';
 import { xxhashAsHex } from '@polkadot/util-crypto';
@@ -10,6 +10,16 @@ import { xxhashAsHex } from '@polkadot/util-crypto';
 import { qrcode } from './qrcode';
 import { createFrames, createImgSize } from './util';
 
+// In styled-components v6, there is a named export which can be used
+// directly, i.e. "import { styled } from ..." with no more magic. Until
+// such time the cjs vs esm import here is problematic, so we hack around
+// the various shapes below
+const styled = (
+  (styledComponents as unknown as { styled: typeof styledComponents }).styled ||
+  (styledComponents as unknown as { default: typeof styledComponents }).default ||
+  styledComponents
+);
+
 interface Props {
   className?: string;
   size?: string | number;
@@ -28,7 +38,7 @@ interface FrameState {
 
 interface TimerState {
   timerDelay: number;
-  timerId: number | null;
+  timerId: ReturnType<typeof setTimeout> | null;
 }
 
 const DEFAULT_FRAME_DELAY = 2750;
@@ -84,7 +94,7 @@ function Display ({ className, size, skipEncoding, style, timerDelay = DEFAULT_F
       return newState;
     });
 
-    timerRef.current.timerId = window.setTimeout(nextFrame, timerRef.current.timerDelay);
+    timerRef.current.timerId = setTimeout(nextFrame, timerRef.current.timerDelay);
 
     return (): void => {
       // eslint-disable-next-line react-hooks/exhaustive-deps

packages/react-qr/src/Scan.tsx

@@ -3,10 +3,20 @@
 
 import React, { useCallback, useMemo } from 'react';
 import Reader from 'react-qr-reader';
-import styled from 'styled-components';
+import styledComponents from 'styled-components';
 
 import { createImgSize } from './util';
 
+// In styled-components v6, there is a named export which can be used
+// directly, i.e. "import { styled } from ..." with no more magic. Until
+// such time the cjs vs esm import here is problematic, so we hack around
+// the various shapes below
+const styled = (
+  (styledComponents as unknown as { styled: typeof styledComponents }).styled ||
+  (styledComponents as unknown as { default: typeof styledComponents }).default ||
+  styledComponents
+);
+
 interface Props {
   className?: string;
   delay?: number;