diff --git a/apps/sample-react-app/src/Screens/components/Welcome.tsx b/apps/sample-react-app/src/Screens/components/Welcome.tsx
index 78746791..2db10892 100644
--- a/apps/sample-react-app/src/Screens/components/Welcome.tsx
+++ b/apps/sample-react-app/src/Screens/components/Welcome.tsx
@@ -1,7 +1,6 @@
import { Button, Heading, HStack, Link, Text, VStack } from '@chakra-ui/react';
import type { JSX } from 'react';
import { StyledCard } from '../../Components/shared';
-import { SwitchWalletButton } from '../../Components';
export const Welcome = (): JSX.Element => {
return (
@@ -18,7 +17,6 @@ export const Welcome = (): JSX.Element => {
w="full"
wrap="wrap"
>
-
void;
+}
+export const ConnectButtonWithModal = ({
+ onClose,
+}: ConnectButtonWithModalProps) => {
+ const { theme } = useContext(ThemeContext);
+
+ const handleSourceClick = (e: SourceInfo) => {
+ _connect(e.id);
+ };
+
+ const { setAccount, connect, setSource } = useWallet();
+
+ const [connectionLoading, setConnectionLoading] = useState(false);
+ const [connectionError, setConnectionError] = useState('');
+
+ const connectHandler = useCallback(
+ async (source: WalletSource) => {
+ try {
+ setSource(source);
+ setConnectionError('');
+ setConnectionLoading(true);
+
+ const { account } = await connect();
+ setAccount(account);
+
+ onClose?.();
+ } catch (e) {
+ if (e instanceof Error) {
+ setConnectionError(e.message);
+ } else {
+ setConnectionError('Failed to connect to wallet');
+ }
+ } finally {
+ setConnectionLoading(false);
+ }
+ },
+ [
+ connect,
+ onClose,
+ setAccount,
+ setConnectionError,
+ setConnectionLoading,
+ setSource,
+ ],
+ );
+
+ const _connect = useCallback(
+ (source: WalletSource) => {
+ connectHandler(source).catch(() => {
+ // do nothing
+ });
+ },
+ [connectHandler],
+ );
+
+ return (
+ <>
+
+ {connectionError}
+ {connectionLoading}
+
+ );
+};
diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/Components/ConnectWalletModal.tsx b/packages/react-wallet-kit/src/ConnectWalletButton/Components/ConnectWalletModal.tsx
deleted file mode 100644
index 562d0356..00000000
--- a/packages/react-wallet-kit/src/ConnectWalletButton/Components/ConnectWalletModal.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import {
- Alert,
- AlertIcon,
- Box,
- Button,
- Flex,
- HStack,
- Icon,
- Spinner,
- Text,
- VStack,
-} from '@chakra-ui/react';
-import { LinkIcon, WalletIcon } from '@heroicons/react/24/solid';
-import React, { useCallback, useState } from 'react';
-import { useWallet } from '../../ConnexProvider';
-import { Dialog } from './Dialog';
-import { WalletSourceRadio } from './WalletSourceRadio';
-
-interface ConnectedWalletDialogProps {
- isOpen: boolean;
- onClose: () => void;
-}
-
-export const ConnectWalletModal: React.FC = ({
- isOpen,
- onClose,
-}) => {
- const header = (
-
-
- Connect Wallet
-
- );
-
- return (
- }
- header={header}
- isOpen={isOpen}
- onClose={onClose}
- />
- );
-};
-
-interface ConnectedWalletBodyProps {
- onClose: () => void;
-}
-
-const ConnectedWalletBody: React.FC = ({
- onClose,
-}) => {
- const { connect } = useWallet();
-
- const [connectionLoading, setConnectionLoading] = useState(false);
- const [connectionError, setConnectionError] = useState('');
-
- const connectHandler = useCallback(async () => {
- try {
- setConnectionError('');
- setConnectionLoading(true);
-
- await connect();
-
- onClose();
- } catch (e) {
- if (e instanceof Error) {
- setConnectionError(e.message);
- } else {
- setConnectionError('Failed to connect to wallet');
- }
- } finally {
- setConnectionLoading(false);
- }
- }, [connect, onClose, setConnectionError, setConnectionLoading]);
-
- const _connect = useCallback(() => {
- connectHandler().catch(() => {
- // do nothing
- });
- }, [connectHandler]);
-
- return (
- <>
-
-
- Wallet
-
-
-
-
- {connectionLoading ? (
-
-
- Waiting for wallet approval...
-
- ) : null}
- {connectionError ? (
-
-
- {connectionError}
-
- ) : null}
-
- :
- }
- onClick={_connect}
- w="full"
- >
- {connectionLoading ? 'Connecting...' : 'Connect'}
-
-
-
- );
-};
diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/Components/Dialog.tsx b/packages/react-wallet-kit/src/ConnectWalletButton/Components/Dialog.tsx
deleted file mode 100644
index e1fb5abf..00000000
--- a/packages/react-wallet-kit/src/ConnectWalletButton/Components/Dialog.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import type { HTMLChakraProps } from '@chakra-ui/react';
-import {
- Modal,
- ModalBody,
- ModalCloseButton,
- ModalContent,
- ModalFooter,
- ModalHeader,
- ModalOverlay,
-} from '@chakra-ui/react';
-import React from 'react';
-
-interface DialogProps {
- isOpen: boolean;
- onClose: () => void;
- header?: React.ReactNode;
- headerStyle?: HTMLChakraProps<'header'>;
- body?: React.ReactNode;
- footer?: React.ReactNode;
- showCloseButton?: boolean;
- closeButtonStyle?: HTMLChakraProps<'button'>;
-}
-
-export const Dialog: React.FC = ({
- isOpen,
- onClose,
- header,
- headerStyle = {},
- body,
- footer,
- showCloseButton = true,
- closeButtonStyle = {},
-}) => {
- return (
-
-
-
- {header ? (
- {header}
- ) : null}
- {showCloseButton ? (
-
- ) : null}
- {body ? {body} : null}
- {footer ? {footer} : null}
-
-
- );
-};
diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/Components/RadioCard.tsx b/packages/react-wallet-kit/src/ConnectWalletButton/Components/RadioCard.tsx
deleted file mode 100644
index b0012f46..00000000
--- a/packages/react-wallet-kit/src/ConnectWalletButton/Components/RadioCard.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import type { HTMLChakraProps } from '@chakra-ui/react';
-import { Box, Button, Flex, HStack } from '@chakra-ui/react';
-import React from 'react';
-
-interface RadioCardProps extends HTMLChakraProps<'button'> {
- children: React.ReactNode;
- selected: boolean;
- onClick: () => void;
-}
-
-export const RadioCard: React.FC = ({
- children,
- selected,
- onClick,
- ...props
-}) => {
- return (
-
- );
-};
-
-interface RadioCircleProps extends HTMLChakraProps<'div'> {
- filled?: boolean;
-}
-
-const RadioCircle: React.FC = ({
- filled = false,
- ...props
-}) => {
- return (
-
-
-
- );
-};
diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/Components/ThemeSelector.tsx b/packages/react-wallet-kit/src/ConnectWalletButton/Components/ThemeSelector.tsx
new file mode 100644
index 00000000..1563e994
--- /dev/null
+++ b/packages/react-wallet-kit/src/ConnectWalletButton/Components/ThemeSelector.tsx
@@ -0,0 +1,15 @@
+// ThemeSelector.js
+
+import React, { useContext } from 'react';
+import { ThemeContext } from '../../provider/ThemeProvider';
+import styled from 'styled-components';
+
+const Button = styled.button``;
+
+const ThemeSelector = () => {
+ const { toggleTheme } = useContext(ThemeContext);
+
+ return ;
+};
+
+export { ThemeSelector };
diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/Components/WalletSourceRadio.tsx b/packages/react-wallet-kit/src/ConnectWalletButton/Components/WalletSourceRadio.tsx
deleted file mode 100644
index 00e8e625..00000000
--- a/packages/react-wallet-kit/src/ConnectWalletButton/Components/WalletSourceRadio.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { HStack, Image, Text, VStack } from '@chakra-ui/react';
-import React, { useCallback } from 'react';
-import type { WalletSource } from '@vechain/wallet-kit';
-import { useWallet } from '../../ConnexProvider';
-import { WalletSources } from '../Constants';
-import { RadioCard } from './RadioCard';
-
-export const WalletSourceRadio: React.FC = () => {
- const { availableWallets, setSource, source } = useWallet();
-
- const handleSourceClick = useCallback(
- (_source: WalletSource) => () => {
- setSource(_source);
- },
- [setSource],
- );
-
- return (
-
- {availableWallets.map((_source: WalletSource) => {
- const isSelected = _source === source;
-
- return (
-
- );
- })}
-
- );
-};
-
-interface WalletSourceButtonProps {
- source: WalletSource;
- isSelected: boolean;
- onClick: () => void;
-}
-
-const WalletSourceButton: React.FC = ({
- source,
- isSelected,
- onClick,
-}) => {
- const sourceInfo = WalletSources[source];
- return (
-
-
-
- {sourceInfo.name}
-
-
- );
-};
diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/Components/Wrapped/ConnectModalWithButtonWrapped.tsx b/packages/react-wallet-kit/src/ConnectWalletButton/Components/Wrapped/ConnectModalWithButtonWrapped.tsx
new file mode 100644
index 00000000..ffb475b2
--- /dev/null
+++ b/packages/react-wallet-kit/src/ConnectWalletButton/Components/Wrapped/ConnectModalWithButtonWrapped.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { ConnectButtonWithModal } from '@vechain/vanilla-wallet-kit';
+
+export const ConnectModalWithButtonWrapped = createComponent({
+ tagName: 'vwk-connect-button-with-modal',
+ elementClass: ConnectButtonWithModal,
+ react: React,
+});
diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/ConnectWalletButton.tsx b/packages/react-wallet-kit/src/ConnectWalletButton/ConnectWalletButton.tsx
index 3f96366e..90fc6141 100644
--- a/packages/react-wallet-kit/src/ConnectWalletButton/ConnectWalletButton.tsx
+++ b/packages/react-wallet-kit/src/ConnectWalletButton/ConnectWalletButton.tsx
@@ -1,27 +1,23 @@
import type { HTMLChakraProps } from '@chakra-ui/react';
-import { Button, Icon, useDisclosure } from '@chakra-ui/react';
-import { WalletIcon } from '@heroicons/react/24/solid';
import React from 'react';
-import { ConnectWalletModal } from './Components/ConnectWalletModal';
+
+import GlobalFonts from '../../assets/fonts/fonts';
+import { ThemeSelector } from './Components/ThemeSelector';
+import { ThemeProvider } from '../provider/ThemeProvider';
+import { ConnectButtonWithModal } from './Components/ConnectButtonWithModal';
interface ConnectWalletButtonProps {
buttonProps?: HTMLChakraProps<'button'>;
}
-export const ConnectWalletButton: React.FC = ({
- buttonProps,
-}): React.ReactElement => {
- const { isOpen, onOpen, onClose } = useDisclosure();
+export const ConnectWalletButton: React.FC<
+ ConnectWalletButtonProps
+> = (): React.ReactElement => {
return (
- <>
-
- }
- onClick={onOpen}
- >
- Connect Wallet
-
-
+
+
+
+
+
);
};
diff --git a/packages/react-wallet-kit/src/ConnectWalletButton/Constants/Constants.ts b/packages/react-wallet-kit/src/ConnectWalletButton/Constants/Constants.ts
index 0e4729db..b6410adb 100644
--- a/packages/react-wallet-kit/src/ConnectWalletButton/Constants/Constants.ts
+++ b/packages/react-wallet-kit/src/ConnectWalletButton/Constants/Constants.ts
@@ -29,3 +29,13 @@ export const WalletSources: Record = {
logo: Sync2Logo,
},
};
+
+// themes.js
+
+export const lightTheme = {
+ mode: 'LIGHT',
+};
+
+export const darkTheme = {
+ mode: 'DARK',
+};
diff --git a/packages/react-wallet-kit/src/provider/ThemeProvider.tsx b/packages/react-wallet-kit/src/provider/ThemeProvider.tsx
new file mode 100644
index 00000000..5a78a342
--- /dev/null
+++ b/packages/react-wallet-kit/src/provider/ThemeProvider.tsx
@@ -0,0 +1,31 @@
+// ThemeProvider.js
+
+import React, { useState, createContext } from 'react';
+import { lightTheme, darkTheme } from '../ConnectWalletButton/Constants';
+import { ThemeProvider as StyledThemeProvider } from 'styled-components';
+
+const ThemeContext = createContext({
+ theme: lightTheme,
+ // eslint-disable-next-line @typescript-eslint/no-empty-function
+ toggleTheme: () => {},
+});
+
+const ThemeProvider = ({ children }: any) => {
+ const [currentTheme, setCurrentTheme] = useState(lightTheme);
+
+ const toggleTheme = () => {
+ setCurrentTheme((prevTheme) =>
+ prevTheme === lightTheme ? darkTheme : lightTheme,
+ );
+ };
+
+ return (
+
+
+ {children}
+
+
+ );
+};
+
+export { ThemeProvider, ThemeContext };
diff --git a/packages/vanilla-wallet-kit/src/components/index.ts b/packages/vanilla-wallet-kit/src/components/index.ts
index 8101163d..8a5e5a9d 100644
--- a/packages/vanilla-wallet-kit/src/components/index.ts
+++ b/packages/vanilla-wallet-kit/src/components/index.ts
@@ -4,3 +4,10 @@ import './vwk-connect-button';
import './vwk-connect-button-with-modal';
import './vwk-source-card';
import './vwk-fonts';
+
+export * from './base';
+export * from './vwk-connect-modal';
+export * from './vwk-connect-button';
+export * from './vwk-connect-button-with-modal';
+export * from './vwk-source-card';
+export * from './vwk-fonts';
diff --git a/packages/vanilla-wallet-kit/src/components/vwk-connect-button-with-modal/index.ts b/packages/vanilla-wallet-kit/src/components/vwk-connect-button-with-modal/index.ts
index 0367155d..1fb18a87 100644
--- a/packages/vanilla-wallet-kit/src/components/vwk-connect-button-with-modal/index.ts
+++ b/packages/vanilla-wallet-kit/src/components/vwk-connect-button-with-modal/index.ts
@@ -2,6 +2,7 @@ import type { TemplateResult } from 'lit';
import { html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { Theme, ThemeMode } from '@vechain/wallet-kit';
+import { SourceInfo } from '../../constants';
@customElement('vwk-connect-button-with-modal')
export class ConnectButtonWithModal extends LitElement {
@@ -18,7 +19,7 @@ export class ConnectButtonWithModal extends LitElement {
open = false;
@property({ type: Function })
- onSourceClick?: undefined;
+ onSourceClick?: (e: SourceInfo) => void;
override render(): TemplateResult {
return html`
diff --git a/packages/vanilla-wallet-kit/src/index.ts b/packages/vanilla-wallet-kit/src/index.ts
index e3af4e0c..1e4a0158 100644
--- a/packages/vanilla-wallet-kit/src/index.ts
+++ b/packages/vanilla-wallet-kit/src/index.ts
@@ -1,2 +1,4 @@
export * from './client';
export * from './assets';
+export * from './components';
+export * from './constants';
diff --git a/yarn.lock b/yarn.lock
index 55275532..23760aa9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2645,7 +2645,7 @@
"@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
"@emotion/utils" "^1.2.1"
-"@emotion/unitless@^0.8.1":
+"@emotion/unitless@^0.8.0", "@emotion/unitless@^0.8.1":
version "0.8.1"
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==
@@ -3572,6 +3572,11 @@
resolved "https://registry.yarnpkg.com/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.2.tgz#d693d972974a354034454ec1317eb6afd0b00312"
integrity sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g==
+"@lit/react@^1.0.1":
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/@lit/react/-/react-1.0.1.tgz#00dc227c60947abd3cbdaa03bb9cca7f5b815451"
+ integrity sha512-io4yIAl9ZFY5coI2ix+nSly4rmEKLFyZM66mxOr9xvxDqwtjdVU/g6Tchb7bo+A23+5Uu/1RZpLCpvHLCGi0rw==
+
"@lit/reactive-element@^1.3.0", "@lit/reactive-element@^1.6.0":
version "1.6.3"
resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.6.3.tgz#25b4eece2592132845d303e091bad9b04cdcfe03"
@@ -6021,6 +6026,11 @@
resolved "https://registry.yarnpkg.com/@types/strip-json-comments/-/strip-json-comments-0.0.30.tgz#9aa30c04db212a9a0649d6ae6fd50accc40748a1"
integrity sha512-7NQmHra/JILCd1QqpSzl8+mJRc8ZHz3uDm8YV1Ks9IhK0epEiTw8aIErbvH9PI+6XbqhyIQy3462nEsn7UVzjQ==
+"@types/stylis@^4.0.2":
+ version "4.2.2"
+ resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.2.tgz#baabb6b3aa6787e90a6bd6cd75cd8fb9a4f256a3"
+ integrity sha512-Rm17MsTpQQP5Jq4BF7CdrxJsDufoiL/q5IbJZYZmOZAJALyijgF7BzLgobXUqraNcQdqFYLYGeglDp6QzaxPpg==
+
"@types/testing-library__jest-dom@^5.14.5", "@types/testing-library__jest-dom@^5.9.1":
version "5.14.9"
resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.9.tgz#0fb1e6a0278d87b6737db55af5967570b67cb466"
@@ -8493,6 +8503,11 @@ camelcase@^6.0.0, camelcase@^6.2.0, camelcase@^6.2.1, camelcase@^6.3.0:
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
+camelize@^1.0.0:
+ version "1.0.1"
+ resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3"
+ integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==
+
caniuse-api@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -9378,6 +9393,11 @@ css-box-model@1.2.1:
dependencies:
tiny-invariant "^1.0.6"
+css-color-keywords@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+ integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==
+
css-declaration-sorter@^6.3.1:
version "6.4.1"
resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz#28beac7c20bad7f1775be3a7129d7eae409a3a71"
@@ -9447,6 +9467,15 @@ css-select@^4.1.3:
domutils "^2.8.0"
nth-check "^2.0.1"
+css-to-react-native@^3.2.0:
+ version "3.2.0"
+ resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32"
+ integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==
+ dependencies:
+ camelize "^1.0.0"
+ css-color-keywords "^1.0.0"
+ postcss-value-parser "^4.0.2"
+
css-tree@1.0.0-alpha.37:
version "1.0.0-alpha.37"
resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22"
@@ -16474,7 +16503,7 @@ postcss-unique-selectors@^5.1.1:
dependencies:
postcss-selector-parser "^6.0.5"
-postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
@@ -16934,6 +16963,11 @@ react-focus-lock@^2.9.4:
use-callback-ref "^1.3.0"
use-sidecar "^1.1.2"
+react-icons@^4.11.0:
+ version "4.11.0"
+ resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.11.0.tgz#4b0e31c9bfc919608095cc429c4f1846f4d66c65"
+ integrity sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==
+
react-is@^16.13.1, react-is@^16.7.0:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -17900,6 +17934,11 @@ shallow-clone@^3.0.0:
dependencies:
kind-of "^6.0.2"
+shallowequal@^1.1.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+ integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
shebang-command@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -18515,6 +18554,21 @@ style-value-types@4.1.1:
hey-listen "^1.0.8"
tslib "^1.10.0"
+styled-components@^6.1.0:
+ version "6.1.0"
+ resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.0.tgz#228e3ab9c1ee1daa4b0a06aae30df0ed14fda274"
+ integrity sha512-VWNfYYBuXzuLS/QYEeoPgMErP26WL+dX9//rEh80B2mmlS1yRxRxuL5eax4m6ybYEUoHWlTy2XOU32767mlMkg==
+ dependencies:
+ "@emotion/is-prop-valid" "^1.2.1"
+ "@emotion/unitless" "^0.8.0"
+ "@types/stylis" "^4.0.2"
+ css-to-react-native "^3.2.0"
+ csstype "^3.1.2"
+ postcss "^8.4.31"
+ shallowequal "^1.1.0"
+ stylis "^4.3.0"
+ tslib "^2.5.0"
+
stylehacks@^5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.1.1.tgz#7934a34eb59d7152149fa69d6e9e56f2fc34bcc9"
@@ -18528,6 +18582,11 @@ stylis@4.2.0:
resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
+stylis@^4.3.0:
+ version "4.3.0"
+ resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.0.tgz#abe305a669fc3d8777e10eefcfc73ad861c5588c"
+ integrity sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==
+
sucrase@^3.20.3, sucrase@^3.32.0:
version "3.34.0"
resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.34.0.tgz#1e0e2d8fcf07f8b9c3569067d92fbd8690fb576f"