Add Design System (#238)
* feat(examples): add full height and remove wrapping div * Remove Channel component in favour of options * feat(react): add hook for keyboard shortcuts * setup: sort only react related packages at the top * Add radix-ui packages * feat(system): add stitches config file * feat(system): add Image primitive * feat(system): add Avatar component * feat(system): add Box primitive * feat(system): add Flex primitive * feat(system): add Grid primitive * feat(system): add Tooltip component * feat(system): add Icon primitive * feat(system): add Button component * feat(system): add IconButton component * feat(system): add EthAddress component * fix(system): pass down button props * feat(system): add option to hide Icon from screen readers * feat(system): add Heading component * feat(system): add Text component * feat(system): add TextInput component * feat(system): add Dialog component * feat(system): add VisuallyHidden primitive * feat(system): add Menu primitive * feat(system): add DropdownMenu component * feat(system): add ContextMenu component * refactor(system): Icon component prop name * feat(system): add AlertDialog component * feat(system): update Avatar default background color
This commit is contained in:
Pavel
GitHub
parent
0dfe9b737c
commit
020df678b9
|
|
@ -47,7 +47,7 @@
|
|||
// Side effect imports.
|
||||
["^\\u0000"],
|
||||
// `react` related packages come first.
|
||||
["^react"],
|
||||
["^react$", "^react-dom$"],
|
||||
// Things that start with a letter (or digit or underscore), or `@` followed by a letter.
|
||||
["^@?\\w"],
|
||||
// Absolute imports and other imports such as Vue-style `@/foo`.
|
||||
|
|
|
|||
|
|
@ -1,23 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/tailwindcss@3.0.0/src/css/preflight.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<title>Channel | Status</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import React, { StrictMode } from 'react'
|
||||
import { render } from 'react-dom'
|
||||
|
||||
import { Channel, lightTheme } from '@status-im/react'
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<div>
|
||||
<Channel
|
||||
publicKey="<YOUR_COMMUNITY_KEY>"
|
||||
theme={lightTheme}
|
||||
options={{
|
||||
showMembers: false,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
document.getElementById('root')
|
||||
)
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
{
|
||||
"name": "channel",
|
||||
"version": "0.0.0",
|
||||
"source": "index.html",
|
||||
"browserslist": "> 0.5%, last 2 versions, not dead, not ios_saf < 13",
|
||||
"scripts": {
|
||||
"dev": "parcel",
|
||||
"prebuild": "rm -rf dist",
|
||||
"build": "parcel build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@status-im/react": "^0.0.0",
|
||||
"react": "^17.0.0",
|
||||
"react-dom": "^17.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^17.0.0",
|
||||
"@types/react-dom": "^17.0.0",
|
||||
"parcel": "^2.0.0",
|
||||
"assert": "^2.0.0",
|
||||
"crypto-browserify": "^3.12.0",
|
||||
"process": "^0.11.10",
|
||||
"stream-browserify": "^3.0.0",
|
||||
"typescript": "^4.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -4,11 +4,7 @@ import { render } from 'react-dom'
|
|||
import { Community, lightTheme } from '@status-im/react'
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<div>
|
||||
<Community publicKey="<YOUR_COMMUNITY_KEY>" theme={lightTheme} />
|
||||
</div>
|
||||
)
|
||||
return <Community publicKey="<YOUR_COMMUNITY_KEY>" theme={lightTheme} />
|
||||
}
|
||||
|
||||
render(
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
body,
|
||||
html,
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -25,7 +25,16 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@hcaptcha/react-hcaptcha": "^1.0.0",
|
||||
"@radix-ui/react-accessible-icon": "^0.1.4",
|
||||
"@radix-ui/react-alert-dialog": "^0.1.7",
|
||||
"@radix-ui/react-collapsible": "^0.1.6",
|
||||
"@radix-ui/react-context-menu": "^0.1.6",
|
||||
"@radix-ui/react-dialog": "^0.1.7",
|
||||
"@radix-ui/react-dropdown-menu": "^0.1.6",
|
||||
"@radix-ui/react-tooltip": "^0.1.7",
|
||||
"@radix-ui/react-visually-hidden": "^0.1.4",
|
||||
"@status-im/core": "^0.0.0",
|
||||
"@stitches/react": "^1.2.7",
|
||||
"emoji-mart": "^3.0.1",
|
||||
"html-entities": "^2.3.2",
|
||||
"js-sha3": "^0.8.0",
|
||||
|
|
@ -34,7 +43,7 @@
|
|||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-is": "^17.0.2",
|
||||
"styled-components": "^5.3.1"
|
||||
"tinykeys": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/emoji-mart": "^3.0.6",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
import { useEffect } from 'react'
|
||||
|
||||
import tinykeys from 'tinykeys'
|
||||
|
||||
import type { KeyBindingMap } from 'tinykeys'
|
||||
|
||||
// docs: https://github.com/jamiebuilds/tinykeys#commonly-used-keys-and-codes
|
||||
export const useKeyboardShortcuts = (keyBindingMap: KeyBindingMap) => {
|
||||
useEffect(() => {
|
||||
return tinykeys(window, keyBindingMap)
|
||||
})
|
||||
}
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
export { type ChannelProps, Channel } from './modules/channel'
|
||||
export { type CommunityProps, Community } from './modules/community'
|
||||
export { darkTheme, lightTheme } from './styles/themes'
|
||||
export type { Config } from './types/config'
|
||||
|
|
|
|||
|
|
@ -1,181 +0,0 @@
|
|||
import React, { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
|
||||
import styled from 'styled-components'
|
||||
|
||||
import { ChatCreation } from '~/src/components/Chat/ChatCreation'
|
||||
import { ChatInput } from '~/src/components/Chat/ChatInput'
|
||||
import { ChatTopbar, ChatTopbarLoading } from '~/src/components/Chat/ChatTopbar'
|
||||
import { TokenRequirement } from '~/src/components/Form/TokenRequirement'
|
||||
import { MessagesList } from '~/src/components/Messages/MessagesList'
|
||||
import { NarrowChannels } from '~/src/components/NarrowMode/NarrowChannels'
|
||||
import { NarrowMembers } from '~/src/components/NarrowMode/NarrowMembers'
|
||||
import { LoadingSkeleton } from '~/src/components/Skeleton/LoadingSkeleton'
|
||||
import { useMessengerContext } from '~/src/contexts/messengerProvider'
|
||||
import { useNarrow } from '~/src/contexts/narrowProvider'
|
||||
|
||||
import type { Reply } from '~/src/hooks/useReply'
|
||||
import type { ChannelData } from '~/src/models/ChannelData'
|
||||
|
||||
export enum ChatBodyState {
|
||||
Chat,
|
||||
Channels,
|
||||
Members,
|
||||
}
|
||||
|
||||
function ChatBodyLoading() {
|
||||
const narrow = useNarrow()
|
||||
return (
|
||||
<Wrapper>
|
||||
<ChatBodyWrapper className={narrow ? 'narrow' : ''}>
|
||||
<ChatTopbarLoading />
|
||||
<LoadingSkeleton />
|
||||
<ChatInput reply={undefined} setReply={() => undefined} />
|
||||
</ChatBodyWrapper>
|
||||
</Wrapper>
|
||||
)
|
||||
}
|
||||
|
||||
type ChatBodyContentProps = {
|
||||
showState: ChatBodyState
|
||||
switchShowState: (state: ChatBodyState) => void
|
||||
channel: ChannelData
|
||||
}
|
||||
|
||||
function ChatBodyContent({
|
||||
showState,
|
||||
switchShowState,
|
||||
channel,
|
||||
}: ChatBodyContentProps) {
|
||||
const [reply, setReply] = useState<Reply | undefined>(undefined)
|
||||
|
||||
switch (showState) {
|
||||
case ChatBodyState.Chat:
|
||||
return (
|
||||
<>
|
||||
<MessagesList setReply={setReply} channel={channel} />
|
||||
<ChatInput reply={reply} setReply={setReply} />
|
||||
</>
|
||||
)
|
||||
case ChatBodyState.Channels:
|
||||
return (
|
||||
<NarrowChannels
|
||||
setShowChannels={() => switchShowState(ChatBodyState.Channels)}
|
||||
/>
|
||||
)
|
||||
case ChatBodyState.Members:
|
||||
return (
|
||||
<NarrowMembers
|
||||
switchShowMembersList={() => switchShowState(ChatBodyState.Members)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
interface GroupChatBodyProps {
|
||||
onClick: () => void
|
||||
showMembers: boolean
|
||||
permission: boolean
|
||||
editGroup: boolean
|
||||
setEditGroup: React.Dispatch<React.SetStateAction<boolean>>
|
||||
}
|
||||
|
||||
export function GroupChatBody({
|
||||
onClick,
|
||||
showMembers,
|
||||
permission,
|
||||
editGroup,
|
||||
setEditGroup,
|
||||
}: GroupChatBodyProps) {
|
||||
const { activeChannel, loadingMessenger } = useMessengerContext()
|
||||
|
||||
const narrow = useNarrow()
|
||||
const className = useMemo(() => (narrow ? 'narrow' : ''), [narrow])
|
||||
|
||||
const [showState, setShowState] = useState<ChatBodyState>(ChatBodyState.Chat)
|
||||
const switchShowState = useCallback(
|
||||
(state: ChatBodyState) => {
|
||||
if (narrow) {
|
||||
setShowState(prev => (prev === state ? ChatBodyState.Chat : state))
|
||||
}
|
||||
},
|
||||
[narrow]
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (!narrow) {
|
||||
setShowState(ChatBodyState.Chat)
|
||||
}
|
||||
}, [narrow])
|
||||
|
||||
if (!loadingMessenger && activeChannel) {
|
||||
return (
|
||||
<Wrapper>
|
||||
<ChatBodyWrapper className={className}>
|
||||
{editGroup ? (
|
||||
<ChatCreation
|
||||
setEditGroup={setEditGroup}
|
||||
activeChannel={activeChannel}
|
||||
/>
|
||||
) : (
|
||||
<ChatTopbar
|
||||
onClick={onClick}
|
||||
setEditGroup={setEditGroup}
|
||||
showMembers={showMembers}
|
||||
showState={showState}
|
||||
switchShowState={switchShowState}
|
||||
/>
|
||||
)}
|
||||
<ChatBodyContent
|
||||
showState={showState}
|
||||
switchShowState={switchShowState}
|
||||
channel={activeChannel}
|
||||
/>
|
||||
</ChatBodyWrapper>
|
||||
{!permission && (
|
||||
<BluredWrapper>
|
||||
<TokenRequirement />
|
||||
</BluredWrapper>
|
||||
)}
|
||||
</Wrapper>
|
||||
)
|
||||
}
|
||||
|
||||
return <ChatBodyLoading />
|
||||
}
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
width: 61%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
background: ${({ theme }) => theme.bodyBackgroundColor};
|
||||
position: relative;
|
||||
|
||||
&.narrow {
|
||||
width: 100%;
|
||||
}
|
||||
`
|
||||
|
||||
const ChatBodyWrapper = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
background: ${({ theme }) => theme.bodyBackgroundColor};
|
||||
`
|
||||
|
||||
const BluredWrapper = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: ${({ theme }) => theme.bodyBackgroundGradient};
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 2;
|
||||
`
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
import React, { useState } from 'react'
|
||||
|
||||
import styled from 'styled-components'
|
||||
|
||||
import { Channels } from '~/src/components/Channels/Channels'
|
||||
import { ChatCreation } from '~/src/components/Chat/ChatCreation'
|
||||
import { AgreementModal } from '~/src/components/Modals/AgreementModal'
|
||||
import { CoinbaseModal } from '~/src/components/Modals/CoinbaseModal'
|
||||
import { EditModal } from '~/src/components/Modals/EditModal'
|
||||
import { LeavingModal } from '~/src/components/Modals/LeavingModal'
|
||||
import { LogoutModal } from '~/src/components/Modals/LogoutModal'
|
||||
import { ProfileFoundModal } from '~/src/components/Modals/ProfileFoundModal'
|
||||
import { ProfileModal } from '~/src/components/Modals/ProfileModal'
|
||||
import { StatusModal } from '~/src/components/Modals/StatusModal'
|
||||
import { UserCreationModal } from '~/src/components/Modals/UserCreationModal'
|
||||
import { UserCreationStartModal } from '~/src/components/Modals/UserCreationStartModal'
|
||||
import { WalletConnectModal } from '~/src/components/Modals/WalletConnectModal'
|
||||
import { WalletModal } from '~/src/components/Modals/WalletModal'
|
||||
import { ToastMessageList } from '~/src/components/ToastMessages/ToastMessageList'
|
||||
import { ChatState, useChatState } from '~/src/contexts/chatStateProvider'
|
||||
import { useNarrow } from '~/src/contexts/narrowProvider'
|
||||
|
||||
import { GroupChatBody } from './GroupChat/GroupChatBody'
|
||||
import { GroupMembers } from './GroupMembers/GroupMembers'
|
||||
|
||||
// import type { ChannelProps } from '.'
|
||||
|
||||
function Modals() {
|
||||
return (
|
||||
<>
|
||||
<UserCreationModal />
|
||||
<EditModal />
|
||||
<ProfileModal />
|
||||
<StatusModal />
|
||||
<WalletModal />
|
||||
<WalletConnectModal />
|
||||
<CoinbaseModal />
|
||||
<LogoutModal />
|
||||
<AgreementModal />
|
||||
<ProfileFoundModal />
|
||||
<UserCreationStartModal />
|
||||
<LeavingModal />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
// interface Props {
|
||||
// options: ChannelProps['options']
|
||||
// }
|
||||
|
||||
export const GroupChatRoom = () => {
|
||||
const [state] = useChatState()
|
||||
const [showMembers, setShowMembers] = useState(false)
|
||||
const [editGroup, setEditGroup] = useState(false)
|
||||
const narrow = useNarrow()
|
||||
|
||||
return (
|
||||
<ChatWrapper>
|
||||
{!narrow && (
|
||||
<ChannelsWrapper>
|
||||
<Channels setEditGroup={setEditGroup} />
|
||||
</ChannelsWrapper>
|
||||
)}
|
||||
{state === ChatState.ChatBody && (
|
||||
<GroupChatBody
|
||||
onClick={() => setShowMembers(!showMembers)}
|
||||
showMembers={showMembers}
|
||||
permission={true}
|
||||
editGroup={editGroup}
|
||||
setEditGroup={setEditGroup}
|
||||
/>
|
||||
)}
|
||||
{showMembers && !narrow && state === ChatState.ChatBody && (
|
||||
<GroupMembers />
|
||||
)}
|
||||
{state === ChatState.ChatCreation && <ChatCreation />}
|
||||
<Modals />
|
||||
<ToastMessageList />
|
||||
</ChatWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
const ChatWrapper = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
`
|
||||
|
||||
const ChannelsWrapper = styled.div`
|
||||
width: 21%;
|
||||
height: 100%;
|
||||
min-width: 250px;
|
||||
background-color: ${({ theme }) => theme.sectionBackgroundColor};
|
||||
padding: 10px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
import React, { useMemo, useState } from 'react'
|
||||
|
||||
import styled from 'styled-components'
|
||||
|
||||
import { MembersList } from '~/src/components/Members/MembersList'
|
||||
import { useMessengerContext } from '~/src/contexts/messengerProvider'
|
||||
|
||||
export function GroupMembers() {
|
||||
const { addContact, activeChannel } = useMessengerContext()
|
||||
const heading = useMemo(
|
||||
() =>
|
||||
activeChannel && activeChannel?.type === 'group'
|
||||
? 'Group members'
|
||||
: 'Members',
|
||||
[activeChannel]
|
||||
)
|
||||
const [newUserInput, setNewUserInput] = useState('')
|
||||
return (
|
||||
<>
|
||||
<MembersWrapper>
|
||||
<MemberHeading>{heading}</MemberHeading>
|
||||
<MembersList />
|
||||
<input
|
||||
value={newUserInput}
|
||||
onChange={e => setNewUserInput(e.target.value)}
|
||||
/>
|
||||
<button onClick={() => addContact(newUserInput)}>Add Contact</button>
|
||||
</MembersWrapper>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
const MembersWrapper = styled.div`
|
||||
width: 18%;
|
||||
height: 100%;
|
||||
min-width: 164px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: ${({ theme }) => theme.sectionBackgroundColor};
|
||||
padding: 16px;
|
||||
overflow-y: scroll;
|
||||
`
|
||||
|
||||
const MemberHeading = styled.h2`
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
color: ${({ theme }) => theme.primary};
|
||||
margin-bottom: 16px;
|
||||
`
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
import React, { useRef } from 'react'
|
||||
|
||||
import styled, { ThemeProvider } from 'styled-components'
|
||||
|
||||
import { ChatStateProvider } from '~/src/contexts/chatStateProvider'
|
||||
import { IdentityProvider } from '~/src/contexts/identityProvider'
|
||||
import { MessengerProvider } from '~/src/contexts/messengerProvider'
|
||||
import { ModalProvider } from '~/src/contexts/modalProvider'
|
||||
import { NarrowProvider } from '~/src/contexts/narrowProvider'
|
||||
import { ToastProvider } from '~/src/contexts/toastProvider'
|
||||
import { GlobalStyle } from '~/src/styles/GlobalStyle'
|
||||
|
||||
import { GroupChatRoom } from './GroupChatRoom'
|
||||
|
||||
import type { Config } from '~/src/types/config'
|
||||
|
||||
interface Props extends Config {
|
||||
options: {
|
||||
showMembers?: false
|
||||
}
|
||||
}
|
||||
|
||||
export const Channel = (props: Props) => {
|
||||
const { publicKey, theme, environment } = props
|
||||
|
||||
const ref = useRef<HTMLHeadingElement>(null)
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<NarrowProvider myRef={ref}>
|
||||
<ModalProvider>
|
||||
<ToastProvider>
|
||||
<Wrapper ref={ref}>
|
||||
<GlobalStyle />
|
||||
<IdentityProvider>
|
||||
<MessengerProvider
|
||||
publicKey={publicKey}
|
||||
environment={environment}
|
||||
>
|
||||
<ChatStateProvider>
|
||||
<GroupChatRoom />
|
||||
<div id="modal-root" />
|
||||
</ChatStateProvider>
|
||||
</MessengerProvider>
|
||||
</IdentityProvider>
|
||||
</Wrapper>
|
||||
</ToastProvider>
|
||||
</ModalProvider>
|
||||
</NarrowProvider>
|
||||
</ThemeProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export type { Props as ChannelProps }
|
||||
|
||||
const Wrapper = styled.div`
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
`
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import { createStitches } from '@stitches/react'
|
||||
|
||||
import type { CSS as StitchesCSS } from '@stitches/react'
|
||||
|
||||
export type { VariantProps } from '@stitches/react'
|
||||
export type CSS = StitchesCSS<typeof config>
|
||||
|
||||
export const { styled, css, keyframes, theme, createTheme, config } =
|
||||
createStitches({
|
||||
prefix: 'status',
|
||||
theme: {
|
||||
fonts: {
|
||||
sans: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
|
||||
mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
||||
},
|
||||
fontWeights: {
|
||||
400: '400',
|
||||
500: '500',
|
||||
600: '600',
|
||||
},
|
||||
colors: {
|
||||
white: '#fff',
|
||||
},
|
||||
space: {
|
||||
1: '4px',
|
||||
2: '8px',
|
||||
3: '16px',
|
||||
4: '20px',
|
||||
5: '24px',
|
||||
6: '32px',
|
||||
7: '48px',
|
||||
8: '64px',
|
||||
9: '80px',
|
||||
},
|
||||
radii: {
|
||||
8: '8px',
|
||||
},
|
||||
},
|
||||
|
||||
media: {
|
||||
medium: '(min-width: 500px)',
|
||||
large: '(min-width: 736px)',
|
||||
|
||||
motion: '(prefers-reduced-motion: no-preference)',
|
||||
},
|
||||
})
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# Avatar
|
||||
|
||||
```tsx
|
||||
import { Avatar } from '@status-im/components'
|
||||
```
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import React from 'react'
|
||||
|
||||
import { Image } from '../image'
|
||||
import { Base, Indicator } from './styles'
|
||||
|
||||
import type { Variants } from './styles'
|
||||
|
||||
interface Props {
|
||||
size: Variants['size']
|
||||
indicator?: 'online' | 'offline'
|
||||
src?: string
|
||||
}
|
||||
|
||||
const Avatar = (props: Props) => {
|
||||
const { size, src, indicator } = props
|
||||
|
||||
// const identicon = useMemo(() => {
|
||||
// const colors = colorWheel
|
||||
// .map((color, idx) => {
|
||||
// const prevDeg = idx === 0 ? '0deg' : `${colorWheel[idx - 1][1]}deg`
|
||||
// return `${color[0]} ${prevDeg} ${color[1]}deg`
|
||||
// })
|
||||
// .join(',')
|
||||
// return `conic-gradient(${colors})`
|
||||
// }, [colorWheel])
|
||||
|
||||
// const intials = useMemo(() => {
|
||||
// if (contact && contact?.customName) {
|
||||
// return contact.customName.slice(0, 2)
|
||||
// }
|
||||
// if (contact && contact.trueName) {
|
||||
// return contact.trueName.slice(0, 2)
|
||||
// }
|
||||
// }, [contact])
|
||||
|
||||
return (
|
||||
<Base size={size}>
|
||||
{src && (
|
||||
<Image
|
||||
src={src}
|
||||
alt="avatar"
|
||||
width="100%"
|
||||
height="100%"
|
||||
fit="cover"
|
||||
radius="full"
|
||||
/>
|
||||
)}
|
||||
{indicator && <Indicator size={size} state={indicator} />}
|
||||
</Base>
|
||||
)
|
||||
}
|
||||
|
||||
export { Avatar }
|
||||
export type { Props as AvatarProps }
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export type { AvatarProps } from './avatar'
|
||||
export { Avatar } from './avatar'
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
import { styled } from '~/src/styles/config'
|
||||
|
||||
import type { VariantProps } from '~/src/styles/config'
|
||||
|
||||
export type Variants = VariantProps<typeof Base>
|
||||
|
||||
export const Base = styled('div', {
|
||||
position: 'relative',
|
||||
background: '#F6F8FA',
|
||||
borderRadius: '100%',
|
||||
flexShrink: 0,
|
||||
|
||||
variants: {
|
||||
size: {
|
||||
20: {
|
||||
width: 20,
|
||||
height: 20,
|
||||
},
|
||||
24: {
|
||||
width: 24,
|
||||
height: 24,
|
||||
},
|
||||
32: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
},
|
||||
36: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
},
|
||||
44: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
},
|
||||
120: {
|
||||
width: 120,
|
||||
height: 120,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
export const Indicator = styled('span', {
|
||||
position: 'absolute',
|
||||
right: -2,
|
||||
bottom: -2,
|
||||
borderRadius: '100%',
|
||||
border: '2px solid #fff',
|
||||
|
||||
variants: {
|
||||
size: {
|
||||
20: {},
|
||||
24: {},
|
||||
32: {
|
||||
width: 12,
|
||||
height: 12,
|
||||
},
|
||||
36: {},
|
||||
44: {},
|
||||
120: {},
|
||||
},
|
||||
state: {
|
||||
online: {
|
||||
backgroundColor: '#4EBC60',
|
||||
},
|
||||
offline: {
|
||||
backgroundColor: '#939BA1',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# Box
|
||||
|
||||
```tsx
|
||||
import { Box } from '@status-im/components'
|
||||
```
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { styled } from '~/src/styles/config'
|
||||
|
||||
const Box = styled('div', {
|
||||
boxSizing: 'border-box',
|
||||
})
|
||||
|
||||
export { Box }
|
||||
export type BoxProps = React.ComponentProps<typeof Box>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export type { BoxProps } from './box'
|
||||
export { Box } from './box'
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# Button
|
||||
|
||||
```tsx
|
||||
import { Button } from '@status-im/components'
|
||||
```
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
import React, { forwardRef } from 'react'
|
||||
|
||||
import { Base } from './styles'
|
||||
|
||||
import type { Variants } from './styles'
|
||||
import type { Ref } from 'react'
|
||||
|
||||
type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>
|
||||
|
||||
interface Props {
|
||||
children: string
|
||||
disabled?: boolean
|
||||
loading?: boolean
|
||||
type?: ButtonProps['type']
|
||||
onClick?: ButtonProps['onClick']
|
||||
variant?: Variants['variant']
|
||||
}
|
||||
|
||||
const Button = (props: Props, ref: Ref<HTMLButtonElement>) => {
|
||||
const {
|
||||
type = 'button',
|
||||
children,
|
||||
disabled,
|
||||
loading,
|
||||
onClick,
|
||||
variant = 'default',
|
||||
...buttonProps
|
||||
} = props
|
||||
|
||||
return (
|
||||
<Base
|
||||
{...buttonProps}
|
||||
type={type}
|
||||
ref={ref}
|
||||
disabled={disabled}
|
||||
loading={loading}
|
||||
onClick={onClick}
|
||||
variant={variant}
|
||||
>
|
||||
{children}
|
||||
</Base>
|
||||
)
|
||||
}
|
||||
|
||||
const _Button = forwardRef(Button)
|
||||
|
||||
export { _Button as Button }
|
||||
export type { Props as ButtonProps }
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export type { ButtonProps } from './button'
|
||||
export { Button } from './button'
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import { styled } from '~/src/styles/config'
|
||||
|
||||
import type { VariantProps } from '~/src/styles/config'
|
||||
|
||||
export type Variants = VariantProps<typeof Base>
|
||||
|
||||
export const Base = styled('button', {
|
||||
all: 'unset',
|
||||
fontFamily: '$sans',
|
||||
fontWeight: '$500',
|
||||
fontSize: '15px',
|
||||
position: 'relative',
|
||||
display: 'inline-flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
padding: '11px 24px',
|
||||
borderRadius: 8,
|
||||
transitionProperty: 'background-color, border-color, color, fill, stroke',
|
||||
transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
transitionDuration: '150ms',
|
||||
|
||||
'&:disabled': {
|
||||
background: '#EEF2F5',
|
||||
color: '#939BA1',
|
||||
cursor: 'not-allowed',
|
||||
},
|
||||
|
||||
variants: {
|
||||
variant: {
|
||||
default: {
|
||||
background: 'rgba(67, 96, 223, 0.1)',
|
||||
color: '#4360DF',
|
||||
'&:hover': {},
|
||||
},
|
||||
minimal: {
|
||||
'&:hover': {},
|
||||
},
|
||||
danger: {
|
||||
background: 'rgba(255, 45, 85, 0.1)',
|
||||
color: '#FF2D55',
|
||||
'&:hover': {},
|
||||
},
|
||||
},
|
||||
loading: {
|
||||
true: {},
|
||||
},
|
||||
width: {
|
||||
full: {
|
||||
width: '100%',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# ContextMenu
|
||||
|
||||
```tsx
|
||||
import { ContextMenu } from '@status-im/components'
|
||||
```
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
import React from 'react'
|
||||
|
||||
import * as Primitive from '@radix-ui/react-context-menu'
|
||||
|
||||
import * as Menu from '../menu'
|
||||
|
||||
import type {
|
||||
ContextMenuContentProps,
|
||||
ContextMenuItemProps,
|
||||
ContextMenuSeparatorProps,
|
||||
ContextMenuTriggerProps,
|
||||
} from '@radix-ui/react-context-menu'
|
||||
|
||||
interface TriggerProps extends ContextMenuTriggerProps {
|
||||
children: [React.ReactElement, React.ReactElement]
|
||||
}
|
||||
|
||||
const ContextMenuTrigger = (props: TriggerProps) => {
|
||||
const { children, ...triggerProps } = props
|
||||
|
||||
const [trigger, menu] = children
|
||||
|
||||
return (
|
||||
<Primitive.Root>
|
||||
<Primitive.Trigger {...triggerProps} asChild>
|
||||
{trigger}
|
||||
</Primitive.Trigger>
|
||||
{menu}
|
||||
</Primitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
interface MenuProps extends ContextMenuContentProps {
|
||||
children: React.ReactElement[] | React.ReactElement
|
||||
}
|
||||
|
||||
const ContextMenu = (props: MenuProps) => {
|
||||
const { children, sideOffset = 6, ...menuProps } = props
|
||||
|
||||
return (
|
||||
<Menu.Content {...menuProps} as={Primitive.Content} sideOffset={sideOffset}>
|
||||
{children}
|
||||
</Menu.Content>
|
||||
)
|
||||
}
|
||||
|
||||
const Item = (props: ContextMenuItemProps & Menu.ItemProps) => {
|
||||
return <Menu.Item as={Primitive.Item} {...props} />
|
||||
}
|
||||
|
||||
interface TriggerItemProps extends Menu.TriggerItemProps {
|
||||
label: string
|
||||
children: React.ReactElement[] | React.ReactElement
|
||||
}
|
||||
|
||||
const TriggerItem = (props: TriggerItemProps) => {
|
||||
const { label, children, ...itemProps } = props
|
||||
|
||||
return (
|
||||
<Primitive.Root>
|
||||
<Menu.TriggerItem as={Primitive.TriggerItem} {...itemProps}>
|
||||
{label}
|
||||
</Menu.TriggerItem>
|
||||
<ContextMenu sideOffset={-1}>{children}</ContextMenu>
|
||||
</Primitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
const Separator = (props: ContextMenuSeparatorProps) => {
|
||||
return <Menu.Separator as={Primitive.Separator} {...props} />
|
||||
}
|
||||
|
||||
ContextMenu.Item = Item
|
||||
ContextMenu.TriggerItem = TriggerItem
|
||||
ContextMenu.Separator = Separator
|
||||
|
||||
export { ContextMenu, ContextMenuTrigger }
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { ContextMenu, ContextMenuTrigger } from './context-menu'
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
import React from 'react'
|
||||
|
||||
import * as Primitive from '@radix-ui/react-alert-dialog'
|
||||
|
||||
import { CrossIcon } from '~/src/icons/cross-icon'
|
||||
|
||||
import { Button } from '../button'
|
||||
import { IconButton } from '../icon-button'
|
||||
import { Text } from '../text'
|
||||
import { Actions, Body, Content, Header, Overlay, Title } from './styles'
|
||||
|
||||
interface TriggerProps {
|
||||
children: [React.ReactElement, React.ReactElement]
|
||||
}
|
||||
|
||||
const AlertDialogTrigger = (props: TriggerProps) => {
|
||||
const { children } = props
|
||||
|
||||
const [trigger, content] = children
|
||||
|
||||
return (
|
||||
<Primitive.Root>
|
||||
<Primitive.Trigger asChild>{trigger}</Primitive.Trigger>
|
||||
|
||||
{content}
|
||||
</Primitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
interface DialogProps {
|
||||
title: string
|
||||
description: string
|
||||
// actionLabel: string
|
||||
// cancelLabel?: string
|
||||
}
|
||||
|
||||
const AlertDialog = (props: DialogProps) => {
|
||||
const { title, description } = props
|
||||
|
||||
return (
|
||||
<Primitive.Portal>
|
||||
<Overlay as={Primitive.Overlay} />
|
||||
<Content as={Primitive.Content}>
|
||||
<Header>
|
||||
<Title as={Primitive.Title}>{title}</Title>
|
||||
<Primitive.Cancel asChild>
|
||||
<IconButton label="Close">
|
||||
<CrossIcon />
|
||||
</IconButton>
|
||||
</Primitive.Cancel>
|
||||
</Header>
|
||||
<Body>
|
||||
<Text as={Primitive.Description}>{description}</Text>
|
||||
</Body>
|
||||
<Actions>
|
||||
<Primitive.Cancel asChild>
|
||||
<Button>Cancel</Button>
|
||||
</Primitive.Cancel>
|
||||
<Primitive.Action asChild>
|
||||
<Button>Action</Button>
|
||||
</Primitive.Action>
|
||||
</Actions>
|
||||
</Content>
|
||||
</Primitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
export { AlertDialog, AlertDialogTrigger }
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# Dialog
|
||||
|
||||
```tsx
|
||||
import { Dialog, AlertDialog } from '@status-im/components'
|
||||
```
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
import React, { useState } from 'react'
|
||||
|
||||
import * as Primitive from '@radix-ui/react-dialog'
|
||||
|
||||
import { CrossIcon } from '~/src/icons/cross-icon'
|
||||
|
||||
import { Button } from '../button'
|
||||
import { IconButton } from '../icon-button'
|
||||
import { Actions, Body, Content, Header, Overlay, Title } from './styles'
|
||||
|
||||
interface DialogTriggerProps {
|
||||
children: [React.ReactElement, React.ReactElement]
|
||||
}
|
||||
|
||||
const DialogTrigger = (props: DialogTriggerProps) => {
|
||||
const { children } = props
|
||||
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const [trigger, content] = children
|
||||
|
||||
return (
|
||||
<Primitive.Root open={open} onOpenChange={setOpen}>
|
||||
<Primitive.Trigger asChild>{trigger}</Primitive.Trigger>
|
||||
{content}
|
||||
</Primitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
interface DialogProps {
|
||||
title: React.ReactNode
|
||||
children: React.ReactNode
|
||||
actionLabel: string
|
||||
cancelLabel?: string
|
||||
}
|
||||
|
||||
const Dialog = (props: DialogProps) => {
|
||||
const { title, children, actionLabel, cancelLabel } = props
|
||||
|
||||
return (
|
||||
<Primitive.Portal>
|
||||
<Overlay as={Primitive.Overlay} />
|
||||
<Content as={Primitive.Content}>
|
||||
<Header>
|
||||
<Title as={Primitive.Title}>{title}</Title>
|
||||
<Primitive.Close asChild>
|
||||
<IconButton label="Close">
|
||||
<CrossIcon />
|
||||
</IconButton>
|
||||
</Primitive.Close>
|
||||
</Header>
|
||||
<Body>{children}</Body>
|
||||
<Actions>
|
||||
{cancelLabel && (
|
||||
<Primitive.Close asChild>
|
||||
<Button>{cancelLabel}</Button>
|
||||
</Primitive.Close>
|
||||
)}
|
||||
<Button>{actionLabel}</Button>
|
||||
</Actions>
|
||||
</Content>
|
||||
</Primitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
export { Dialog, DialogTrigger }
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export { AlertDialog, AlertDialogTrigger } from './alert-dialog'
|
||||
export { Dialog, DialogTrigger } from './dialog'
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
import { keyframes, styled } from '~/src/styles/config'
|
||||
|
||||
const overlayAnimation = keyframes({
|
||||
'0%': {
|
||||
opacity: 0,
|
||||
},
|
||||
'100%': {
|
||||
opacity: 1,
|
||||
},
|
||||
})
|
||||
|
||||
export const Overlay = styled('div', {
|
||||
inset: 0,
|
||||
position: 'fixed',
|
||||
backgroundColor: 'rgba(0,0,0,0.4)',
|
||||
|
||||
'@motion': {
|
||||
animation: `${overlayAnimation} 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards`,
|
||||
},
|
||||
})
|
||||
|
||||
const contentAnimation = keyframes({
|
||||
'0%': {
|
||||
opacity: 0,
|
||||
transform: 'translate(-50%, -48%) scale(.96)',
|
||||
},
|
||||
'100%': {
|
||||
opacity: 1,
|
||||
transform: 'translate(-50%, -50%) scale(1)',
|
||||
},
|
||||
})
|
||||
|
||||
export const Content = styled('div', {
|
||||
backgroundColor: 'white',
|
||||
borderRadius: 8,
|
||||
boxShadow:
|
||||
'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
|
||||
position: 'fixed',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
width: '90vw',
|
||||
maxWidth: '638px',
|
||||
maxHeight: '85vh',
|
||||
|
||||
'@motion': {
|
||||
animation: `${contentAnimation} 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards`,
|
||||
},
|
||||
})
|
||||
|
||||
export const Header = styled('div', {
|
||||
padding: '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
borderBottom: '1px solid #eee',
|
||||
})
|
||||
|
||||
export const Body = styled('div', {
|
||||
padding: '16px',
|
||||
})
|
||||
|
||||
export const Actions = styled('div', {
|
||||
padding: '16px 18px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-end',
|
||||
gap: 16,
|
||||
borderTop: '1px solid #eee',
|
||||
})
|
||||
|
||||
export const Title = styled('div', {
|
||||
margin: 0,
|
||||
fontWeight: 500,
|
||||
fontSize: 17,
|
||||
})
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# DropdownMenu
|
||||
|
||||
```tsx
|
||||
import { DropdownMenu } from '@status-im/components'
|
||||
```
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
import React from 'react'
|
||||
|
||||
import * as Primitive from '@radix-ui/react-dropdown-menu'
|
||||
|
||||
import * as Menu from '../menu'
|
||||
|
||||
import type {
|
||||
DropdownMenuContentProps,
|
||||
DropdownMenuItemProps,
|
||||
DropdownMenuSeparatorProps,
|
||||
DropdownMenuTriggerProps,
|
||||
} from '@radix-ui/react-dropdown-menu'
|
||||
|
||||
interface TriggerProps extends DropdownMenuTriggerProps {
|
||||
children: [React.ReactElement, React.ReactElement]
|
||||
}
|
||||
|
||||
const DropdownMenuTrigger = (props: TriggerProps) => {
|
||||
const { children, ...triggerProps } = props
|
||||
|
||||
const [trigger, content] = children
|
||||
|
||||
return (
|
||||
<Primitive.Root>
|
||||
<Primitive.Trigger {...triggerProps} asChild>
|
||||
{trigger}
|
||||
</Primitive.Trigger>
|
||||
{content}
|
||||
</Primitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
interface MenuProps extends DropdownMenuContentProps {
|
||||
children: React.ReactElement[] | React.ReactElement
|
||||
}
|
||||
|
||||
const DropdownMenu = (props: MenuProps) => {
|
||||
const { children, align = 'start', sideOffset = 6, ...menuProps } = props
|
||||
|
||||
return (
|
||||
<Menu.Content
|
||||
{...menuProps}
|
||||
as={Primitive.Content}
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
>
|
||||
{children}
|
||||
</Menu.Content>
|
||||
)
|
||||
}
|
||||
|
||||
const Item = (props: DropdownMenuItemProps & Menu.ItemProps) => {
|
||||
return <Menu.Item as={Primitive.Item} {...props} />
|
||||
}
|
||||
|
||||
interface TriggerItemProps extends Menu.TriggerItemProps {
|
||||
label: string
|
||||
children: React.ReactElement[] | React.ReactElement
|
||||
}
|
||||
|
||||
const TriggerItem = (props: TriggerItemProps) => {
|
||||
const { label, children, ...itemProps } = props
|
||||
|
||||
return (
|
||||
<Primitive.Root>
|
||||
<Menu.TriggerItem as={Primitive.TriggerItem} {...itemProps}>
|
||||
{label}
|
||||
</Menu.TriggerItem>
|
||||
<DropdownMenu sideOffset={-1}>{children}</DropdownMenu>
|
||||
</Primitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
const Separator = (props: DropdownMenuSeparatorProps) => {
|
||||
return <Menu.Separator as={Primitive.Separator} {...props} />
|
||||
}
|
||||
|
||||
DropdownMenu.Item = Item
|
||||
DropdownMenu.TriggerItem = TriggerItem
|
||||
DropdownMenu.Separator = Separator
|
||||
|
||||
export { DropdownMenu, DropdownMenuTrigger }
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { DropdownMenu, DropdownMenuTrigger } from './dropdown-menu'
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# EthAddress
|
||||
|
||||
```tsx
|
||||
import { EthAddress } from '@status-im/components'
|
||||
```
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import React from 'react'
|
||||
|
||||
import { Text } from '../text'
|
||||
|
||||
import type { TextProps } from '../text'
|
||||
|
||||
interface Props extends TextProps {
|
||||
children: string
|
||||
}
|
||||
|
||||
const EthAddress = (props: Props) => {
|
||||
const { children, ...textProps } = props
|
||||
|
||||
return (
|
||||
<Text {...textProps}>
|
||||
0x{children.substring(0, 3)}...{children.substring(children.length - 3)}
|
||||
</Text>
|
||||
)
|
||||
}
|
||||
|
||||
export { EthAddress }
|
||||
export type { Props as EthAddressProps }
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export type { EthAddressProps } from './eth-address'
|
||||
export { EthAddress } from './eth-address'
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# Flex
|
||||
|
||||
```tsx
|
||||
import { Flex } from '@status-im/components'
|
||||
```
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
import { styled } from '~/src/styles/config'
|
||||
|
||||
import { Box } from '../box'
|
||||
|
||||
const Flex = styled(Box, {
|
||||
display: 'flex',
|
||||
|
||||
variants: {
|
||||
direction: {
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
},
|
||||
column: {
|
||||
flexDirection: 'column',
|
||||
},
|
||||
rowReverse: {
|
||||
flexDirection: 'row-reverse',
|
||||
},
|
||||
columnReverse: {
|
||||
flexDirection: 'column-reverse',
|
||||
},
|
||||
},
|
||||
align: {
|
||||
start: {
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
center: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
end: {
|
||||
alignItems: 'flex-end',
|
||||
},
|
||||
stretch: {
|
||||
alignItems: 'stretch',
|
||||
},
|
||||
baseline: {
|
||||
alignItems: 'baseline',
|
||||
},
|
||||
},
|
||||
justify: {
|
||||
start: {
|
||||
justifyContent: 'flex-start',
|
||||
},
|
||||
center: {
|
||||
justifyContent: 'center',
|
||||
},
|
||||
end: {
|
||||
justifyContent: 'flex-end',
|
||||
},
|
||||
between: {
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
},
|
||||
wrap: {
|
||||
noWrap: {
|
||||
flexWrap: 'nowrap',
|
||||
},
|
||||
wrap: {
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
wrapReverse: {
|
||||
flexWrap: 'wrap-reverse',
|
||||
},
|
||||
},
|
||||
gap: {
|
||||
1: {
|
||||
gap: '$1',
|
||||
},
|
||||
2: {
|
||||
gap: '$2',
|
||||
},
|
||||
3: {
|
||||
gap: '$3',
|
||||
},
|
||||
4: {
|
||||
gap: '$4',
|
||||
},
|
||||
5: {
|
||||
gap: '$5',
|
||||
},
|
||||
6: {
|
||||
gap: '$6',
|
||||
},
|
||||
7: {
|
||||
gap: '$7',
|
||||
},
|
||||
8: {
|
||||
gap: '$8',
|
||||
},
|
||||
9: {
|
||||
gap: '$9',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
defaultVariants: {
|
||||
direction: 'row',
|
||||
align: 'stretch',
|
||||
justify: 'start',
|
||||
wrap: 'noWrap',
|
||||
},
|
||||
})
|
||||
|
||||
export { Flex }
|
||||
export type FlexProps = React.ComponentProps<typeof Flex>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export type { FlexProps } from './flex'
|
||||
export { Flex } from './flex'
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# Grid
|
||||
|
||||
```tsx
|
||||
import { Grid } from '@status-im/components'
|
||||
```
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
import { styled } from '~/src/styles/config'
|
||||
|
||||
import { Box } from '../box'
|
||||
|
||||
const Grid = styled(Box, {
|
||||
display: 'grid',
|
||||
|
||||
variants: {
|
||||
align: {
|
||||
start: {
|
||||
alignItems: 'start',
|
||||
},
|
||||
center: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
end: {
|
||||
alignItems: 'end',
|
||||
},
|
||||
stretch: {
|
||||
alignItems: 'stretch',
|
||||
},
|
||||
baseline: {
|
||||
alignItems: 'baseline',
|
||||
},
|
||||
},
|
||||
justify: {
|
||||
start: {
|
||||
justifyContent: 'start',
|
||||
},
|
||||
center: {
|
||||
justifyContent: 'center',
|
||||
},
|
||||
end: {
|
||||
justifyContent: 'end',
|
||||
},
|
||||
between: {
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
},
|
||||
flow: {
|
||||
row: {
|
||||
gridAutoFlow: 'row',
|
||||
},
|
||||
column: {
|
||||
gridAutoFlow: 'column',
|
||||
},
|
||||
dense: {
|
||||
gridAutoFlow: 'dense',
|
||||
},
|
||||
rowDense: {
|
||||
gridAutoFlow: 'row dense',
|
||||
},
|
||||
columnDense: {
|
||||
gridAutoFlow: 'column dense',
|
||||
},
|
||||
},
|
||||
columns: {
|
||||
1: {
|
||||
gridTemplateColumns: 'repeat(1, 1fr)',
|
||||
},
|
||||
2: {
|
||||
gridTemplateColumns: 'repeat(2, 1fr)',
|
||||
},
|
||||
3: {
|
||||
gridTemplateColumns: 'repeat(3, 1fr)',
|
||||
},
|
||||
4: {
|
||||
gridTemplateColumns: 'repeat(4, 1fr)',
|
||||
},
|
||||
},
|
||||
gap: {
|
||||
1: {
|
||||
gap: '$1',
|
||||
},
|
||||
2: {
|
||||
gap: '$2',
|
||||
},
|
||||
3: {
|
||||
gap: '$3',
|
||||
},
|
||||
4: {
|
||||
gap: '$4',
|
||||
},
|
||||
5: {
|
||||
gap: '$5',
|
||||
},
|
||||
6: {
|
||||
gap: '$6',
|
||||
},
|
||||
7: {
|
||||
gap: '$7',
|
||||
},
|
||||
8: {
|
||||
gap: '$8',
|
||||
},
|
||||
9: {
|
||||
gap: '$9',
|
||||
},
|
||||
},
|
||||
gapX: {
|
||||
1: {
|
||||
columnGap: '$1',
|
||||
},
|
||||
2: {
|
||||
columnGap: '$2',
|
||||
},
|
||||
3: {
|
||||
columnGap: '$3',
|
||||
},
|
||||
4: {
|
||||
columnGap: '$4',
|
||||
},
|
||||
5: {
|
||||
columnGap: '$5',
|
||||
},
|
||||
6: {
|
||||
columnGap: '$6',
|
||||
},
|
||||
7: {
|
||||
columnGap: '$7',
|
||||
},
|
||||
8: {
|
||||
columnGap: '$8',
|
||||
},
|
||||
9: {
|
||||
columnGap: '$9',
|
||||
},
|
||||
},
|
||||
gapY: {
|
||||
1: {
|
||||
rowGap: '$1',
|
||||
},
|
||||
2: {
|
||||
rowGap: '$2',
|
||||
},
|
||||
3: {
|
||||
rowGap: '$3',
|
||||
},
|
||||
4: {
|
||||
rowGap: '$4',
|
||||
},
|
||||
5: {
|
||||
rowGap: '$5',
|
||||
},
|
||||
6: {
|
||||
rowGap: '$6',
|
||||
},
|
||||
7: {
|
||||
rowGap: '$7',
|
||||
},
|
||||
8: {
|
||||
rowGap: '$8',
|
||||
},
|
||||
9: {
|
||||
rowGap: '$9',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
export { Grid }
|
||||
export type GridProps = React.ComponentProps<typeof Grid>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export type { GridProps } from './grid'
|
||||
export { Grid } from './grid'
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# Heading
|
||||
|
||||
```tsx
|
||||
import { Heading } from '@status-im/components'
|
||||
```
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
import { styled, theme } from '~/src/styles/config'
|
||||
|
||||
import type React from 'react'
|
||||
|
||||
const Heading = styled('div', {
|
||||
fontFamily: theme.fonts.sans,
|
||||
fontSize: '17px',
|
||||
|
||||
variants: {
|
||||
size: {},
|
||||
color: {},
|
||||
weight: {
|
||||
'400': {
|
||||
fontWeight: theme.fontWeights[400],
|
||||
},
|
||||
'500': {
|
||||
fontWeight: theme.fontWeights[500],
|
||||
},
|
||||
'600': {
|
||||
fontWeight: theme.fontWeights[600],
|
||||
},
|
||||
},
|
||||
align: {
|
||||
left: {
|
||||
textAlign: 'left',
|
||||
},
|
||||
right: {
|
||||
textAlign: 'right',
|
||||
},
|
||||
center: {
|
||||
textAlign: 'center',
|
||||
},
|
||||
},
|
||||
transform: {
|
||||
uppercase: {
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
lowercase: {
|
||||
textTransform: 'lowercase',
|
||||
},
|
||||
capitalize: {
|
||||
textTransform: 'capitalize',
|
||||
},
|
||||
},
|
||||
truncate: {
|
||||
true: {
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
minWidth: 0,
|
||||
maxWidth: '100%',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
defaultVariants: {
|
||||
align: 'left',
|
||||
},
|
||||
|
||||
// compoundVariants: {},
|
||||
})
|
||||
|
||||
export { Heading }
|
||||
export type HeadingProps = React.ComponentProps<typeof Heading>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export type { HeadingProps } from './heading'
|
||||
export { Heading } from './heading'
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# IconButton
|
||||
|
||||
```tsx
|
||||
import { IconButton } from '@status-im/components'
|
||||
```
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import React, { forwardRef } from 'react'
|
||||
|
||||
import { AccessibleIcon } from '@radix-ui/react-accessible-icon'
|
||||
|
||||
import { Base } from './styles'
|
||||
|
||||
import type { Variants } from './styles'
|
||||
import type { Ref } from 'react'
|
||||
|
||||
type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>
|
||||
|
||||
interface Props {
|
||||
label: string
|
||||
children: React.ReactElement
|
||||
type?: ButtonProps['type']
|
||||
onClick?: ButtonProps['onClick']
|
||||
intent?: Variants['intent']
|
||||
color?: Variants['color']
|
||||
active?: boolean
|
||||
}
|
||||
|
||||
const IconButton = (props: Props, ref: Ref<HTMLButtonElement>) => {
|
||||
const {
|
||||
label,
|
||||
children,
|
||||
type = 'button',
|
||||
onClick,
|
||||
intent,
|
||||
color,
|
||||
active,
|
||||
...buttonProps
|
||||
} = props
|
||||
|
||||
return (
|
||||
<Base
|
||||
{...buttonProps}
|
||||
type={type}
|
||||
ref={ref}
|
||||
aria-label={label}
|
||||
onClick={onClick}
|
||||
intent={intent}
|
||||
color={color}
|
||||
active={active}
|
||||
>
|
||||
<AccessibleIcon label={label}>{children}</AccessibleIcon>
|
||||
</Base>
|
||||
)
|
||||
}
|
||||
|
||||
const _IconButton = forwardRef(IconButton)
|
||||
|
||||
export { _IconButton as IconButton }
|
||||
export type { Props as IconButtonProps }
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export type { IconButtonProps } from './icon-button'
|
||||
export { IconButton } from './icon-button'
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
import { styled } from '~/src/styles/config'
|
||||
|
||||
import type { VariantProps } from '~/src/styles/config'
|
||||
|
||||
export type Variants = VariantProps<typeof Base>
|
||||
|
||||
export const Base = styled('button', {
|
||||
all: 'unset',
|
||||
width: 32,
|
||||
height: 32,
|
||||
flexShrink: 0,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 8,
|
||||
|
||||
'&:hover': {
|
||||
background: '#EEF2F5',
|
||||
},
|
||||
|
||||
'&[aria-expanded="true"]': {
|
||||
background: '#F6F8FA',
|
||||
},
|
||||
|
||||
variants: {
|
||||
color: {
|
||||
default: {
|
||||
color: '#000',
|
||||
},
|
||||
gray: {
|
||||
color: '#939BA1',
|
||||
},
|
||||
},
|
||||
intent: {
|
||||
info: {
|
||||
'&:hover': {
|
||||
background: 'rgba(67, 96, 223, 0.1)',
|
||||
color: '#4360DF',
|
||||
},
|
||||
},
|
||||
danger: {
|
||||
'&:hover': {
|
||||
background: 'rgba(255, 45, 85, 0.2)',
|
||||
color: '#FF2D55',
|
||||
},
|
||||
},
|
||||
},
|
||||
active: {
|
||||
true: {
|
||||
background: '#F6F8FA',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
defaultVariants: {
|
||||
color: 'default',
|
||||
},
|
||||
})
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# Icon
|
||||
|
||||
```tsx
|
||||
import { Icon } from '@status-im/components'
|
||||
```
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import React, { cloneElement } from 'react'
|
||||
|
||||
import { Root } from '@radix-ui/react-accessible-icon'
|
||||
|
||||
type Props = ({ label: string; hidden?: false } | { hidden: true }) & {
|
||||
children: React.ReactElement
|
||||
}
|
||||
|
||||
const Icon = (props: Props) => {
|
||||
const { children, hidden } = props
|
||||
|
||||
if (hidden) {
|
||||
return cloneElement(children, {
|
||||
'aria-hidden': 'true',
|
||||
focusable: 'false',
|
||||
})
|
||||
}
|
||||
|
||||
return <Root label={props.label}>{children}</Root>
|
||||
}
|
||||
|
||||
export { Icon }
|
||||
export type { Props as IconProps }
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export type { IconProps } from './icon'
|
||||
export { Icon } from './icon'
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# Image
|
||||
|
||||
```tsx
|
||||
import { Image } from '@status-im/components'
|
||||
```
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import React from 'react'
|
||||
|
||||
import { Base } from './styles'
|
||||
|
||||
import type { Variants } from './styles'
|
||||
|
||||
interface Props {
|
||||
src: string
|
||||
alt: string
|
||||
width?: number | '100%'
|
||||
height?: number | '100%'
|
||||
fit?: Variants['fit']
|
||||
radius?: Variants['radius']
|
||||
}
|
||||
|
||||
const Image = (props: Props) => {
|
||||
const { width, height, alt, radius, fit } = props
|
||||
|
||||
if (!alt) {
|
||||
console.warn(
|
||||
'The `alt` prop was not provided to an image. ' +
|
||||
'Add `alt` text for screen readers, or set `alt=""` prop to indicate that the image ' +
|
||||
'is decorative or redundant with displayed text and should not be announced by screen readers.'
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Base
|
||||
{...props}
|
||||
width={width}
|
||||
height={height}
|
||||
css={{ width, height }}
|
||||
radius={radius}
|
||||
fit={fit}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Image }
|
||||
export type { Props as ImageProps }
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export type { ImageProps } from './image'
|
||||
export { Image } from './image'
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import { styled } from '~/src/styles/config'
|
||||
|
||||
import type { VariantProps } from '~/src/styles/config'
|
||||
|
||||
export type Variants = VariantProps<typeof Base>
|
||||
|
||||
export const Base = styled('img', {
|
||||
display: 'block',
|
||||
verticalAlign: 'middle',
|
||||
maxWidth: '100%',
|
||||
height: 'auto',
|
||||
|
||||
variants: {
|
||||
radius: {
|
||||
full: {
|
||||
borderRadius: '100%',
|
||||
},
|
||||
},
|
||||
fit: {
|
||||
contain: {
|
||||
objectFit: 'contain',
|
||||
},
|
||||
cover: {
|
||||
objectFit: 'cover',
|
||||
},
|
||||
fill: {
|
||||
objectFit: 'fill',
|
||||
},
|
||||
none: {
|
||||
objectFit: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export type { ItemProps, TriggerItemProps } from './menu'
|
||||
export { Content, Item, Separator, TriggerItem } from './menu'
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
import React, { cloneElement } from 'react'
|
||||
|
||||
import { ChevronRightIcon } from '~/src/icons/chevron-right-icon'
|
||||
import { styled, theme } from '~/src/styles/config'
|
||||
|
||||
import { Box } from '../box'
|
||||
import { Icon } from '../icon'
|
||||
|
||||
const Content = styled('div', {
|
||||
minWidth: 176,
|
||||
padding: '8px 0',
|
||||
background: theme.colors.white,
|
||||
borderRadius: theme.radii[8],
|
||||
boxShadow:
|
||||
'0px 2px 4px rgba(0, 34, 51, 0.16), 0px 4px 12px rgba(0, 34, 51, 0.08)',
|
||||
})
|
||||
|
||||
interface ItemProps {
|
||||
icon?: React.ReactElement
|
||||
children: React.ReactNode
|
||||
danger?: boolean
|
||||
}
|
||||
|
||||
const Item = (props: ItemProps & { as: string | React.ComponentType }) => {
|
||||
const { icon, children, ...itemProps } = props
|
||||
|
||||
return (
|
||||
<ItemBase {...itemProps}>
|
||||
{icon && (
|
||||
<Box css={{ width: 16, height: 16 }}>
|
||||
<Icon hidden>{cloneElement(icon, { width: 16, height: 16 })}</Icon>
|
||||
</Box>
|
||||
)}
|
||||
{children}
|
||||
</ItemBase>
|
||||
)
|
||||
}
|
||||
|
||||
const ItemBase = styled('div', {
|
||||
all: 'unset',
|
||||
height: 34,
|
||||
fontSize: 13,
|
||||
lineHeight: 1,
|
||||
color: '#000',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
padding: '4px 12px 4px 14px',
|
||||
position: 'relative',
|
||||
userSelect: 'none',
|
||||
whiteSpace: 'nowrap',
|
||||
|
||||
'&:focus, &[aria-expanded="true"]': {
|
||||
backgroundColor: '#EEF2F5',
|
||||
},
|
||||
|
||||
'&[data-disabled]': {
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
|
||||
svg: {
|
||||
color: '#4360DF',
|
||||
},
|
||||
|
||||
variants: {
|
||||
danger: {
|
||||
true: {
|
||||
color: '#FF2D55',
|
||||
svg: {
|
||||
color: '#FF2D55',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
type TriggerItemProps = ItemProps
|
||||
|
||||
const TriggerItem = (
|
||||
props: ItemProps & { as: string | React.ComponentType }
|
||||
) => {
|
||||
const { children, ...itemProps } = props
|
||||
|
||||
return (
|
||||
<Item {...itemProps}>
|
||||
{children}
|
||||
<TriggerItemIcon>
|
||||
<ChevronRightIcon />
|
||||
</TriggerItemIcon>
|
||||
</Item>
|
||||
)
|
||||
}
|
||||
|
||||
const TriggerItemIcon = styled('div', {
|
||||
marginLeft: 'auto',
|
||||
paddingLeft: 20,
|
||||
})
|
||||
|
||||
const Separator = styled('div', {
|
||||
height: 1,
|
||||
background: '#F0F2F5',
|
||||
margin: '5px 0',
|
||||
})
|
||||
|
||||
export { Content, Item, Separator, TriggerItem }
|
||||
export type { ItemProps, TriggerItemProps }
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export type { TextInputProps } from './text-input'
|
||||
export { TextInput } from './text-input'
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { styled } from '~/src/styles/config'
|
||||
|
||||
export const Base = styled('input', {
|
||||
fontFamily: '$sans',
|
||||
lineHeight: 1.2,
|
||||
fontSize: '15px',
|
||||
padding: '10px 16px',
|
||||
background: '#EEF2F5',
|
||||
borderRadius: 8,
|
||||
height: 44,
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
|
||||
'&::placeholder': {
|
||||
color: '#939BA1',
|
||||
},
|
||||
|
||||
'&:focus': {
|
||||
boxShadow: `0 0 0 2px blue`,
|
||||
},
|
||||
})
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# TextInput
|
||||
|
||||
```tsx
|
||||
import { TextInput } from '@status-im/components'
|
||||
```
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import React, { forwardRef } from 'react'
|
||||
|
||||
import { Box } from '../box'
|
||||
import { Base } from './styles'
|
||||
|
||||
import type { Ref } from 'react'
|
||||
|
||||
type InputProps = React.InputHTMLAttributes<HTMLInputElement>
|
||||
|
||||
interface Props {
|
||||
id?: string
|
||||
name?: string
|
||||
type?: InputProps['type']
|
||||
value?: string
|
||||
defaultValue?: string
|
||||
onChange?: InputProps['onChange']
|
||||
onBlur?: InputProps['onBlur']
|
||||
disabled?: boolean
|
||||
readOnly?: boolean
|
||||
required?: boolean
|
||||
invalid?: boolean
|
||||
autoFocus?: boolean
|
||||
maxLength?: number
|
||||
minLength?: number
|
||||
placeholder?: string
|
||||
inputMode?: InputProps['inputMode']
|
||||
autoComplete?: string // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete
|
||||
}
|
||||
|
||||
const TextInput = (props: Props, ref: Ref<HTMLInputElement>) => {
|
||||
return (
|
||||
<Box>
|
||||
<Base ref={ref} {...props} />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
const _TextInput = forwardRef(TextInput)
|
||||
|
||||
export { _TextInput as TextInput }
|
||||
export type { Props as TextInputProps }
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export type { TextProps } from './text'
|
||||
export { Text } from './text'
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# Text
|
||||
|
||||
```tsx
|
||||
import { Text } from '@status-im/components'
|
||||
```
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
import { styled, theme } from '~/src/styles/config'
|
||||
|
||||
import type React from 'react'
|
||||
|
||||
const Text = styled('div', {
|
||||
fontFamily: theme.fonts.sans,
|
||||
|
||||
variants: {
|
||||
size: {
|
||||
'10': {
|
||||
fontSize: '10px',
|
||||
},
|
||||
'12': {
|
||||
fontSize: '12px',
|
||||
},
|
||||
'14': {
|
||||
fontSize: '14px',
|
||||
},
|
||||
},
|
||||
color: {
|
||||
gray: {
|
||||
color: '#939BA1',
|
||||
},
|
||||
},
|
||||
weight: {
|
||||
'400': {
|
||||
fontWeight: theme.fontWeights[400],
|
||||
},
|
||||
'500': {
|
||||
fontWeight: theme.fontWeights[500],
|
||||
},
|
||||
'600': {
|
||||
fontWeight: theme.fontWeights[600],
|
||||
},
|
||||
},
|
||||
align: {
|
||||
left: {
|
||||
textAlign: 'left',
|
||||
},
|
||||
right: {
|
||||
textAlign: 'right',
|
||||
},
|
||||
center: {
|
||||
textAlign: 'center',
|
||||
},
|
||||
},
|
||||
transform: {
|
||||
uppercase: {
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
lowercase: {
|
||||
textTransform: 'lowercase',
|
||||
},
|
||||
capitalize: {
|
||||
textTransform: 'capitalize',
|
||||
},
|
||||
},
|
||||
truncate: {
|
||||
true: {
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
// minWidth: 0,
|
||||
// maxWidth: '100%',
|
||||
flex: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
defaultVariants: {
|
||||
align: 'left',
|
||||
weight: '400',
|
||||
},
|
||||
|
||||
// compoundVariants: {},
|
||||
})
|
||||
|
||||
export { Text }
|
||||
export type TextProps = React.ComponentProps<typeof Text>
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export type { TooltipProps } from './tooltip'
|
||||
export { Tooltip } from './tooltip'
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
import * as Primitive from '@radix-ui/react-tooltip'
|
||||
|
||||
import { keyframes, styled, theme } from '~/src/styles/config'
|
||||
|
||||
export const slideUpAndFade = keyframes({
|
||||
'0%': { opacity: 0, transform: 'translateY(2px)' },
|
||||
'100%': { opacity: 1, transform: 'translateY(0)' },
|
||||
})
|
||||
|
||||
export const slideRightAndFade = keyframes({
|
||||
'0%': { opacity: 0, transform: 'translateX(-2px)' },
|
||||
'100%': { opacity: 1, transform: 'translateX(0)' },
|
||||
})
|
||||
|
||||
export const slideDownAndFade = keyframes({
|
||||
'0%': { opacity: 0, transform: 'translateY(-2px)' },
|
||||
'100%': { opacity: 1, transform: 'translateY(0)' },
|
||||
})
|
||||
|
||||
export const slideLeftAndFade = keyframes({
|
||||
'0%': { opacity: 0, transform: 'translateX(2px)' },
|
||||
'100%': { opacity: 1, transform: 'translateX(0)' },
|
||||
})
|
||||
|
||||
export const Content = styled(Primitive.Content, {
|
||||
fontFamily: theme.fonts.sans,
|
||||
fontSize: 13,
|
||||
padding: 8,
|
||||
lineHeight: 1,
|
||||
backgroundColor: '#000',
|
||||
color: '#fff',
|
||||
borderRadius: 8,
|
||||
|
||||
'@media (prefers-reduced-motion: no-preference)': {
|
||||
animationDuration: '400ms',
|
||||
animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
animationFillMode: 'forwards',
|
||||
willChange: 'transform, opacity',
|
||||
|
||||
'&[data-state="delayed-open"]': {
|
||||
'&[data-side="top"]': {
|
||||
animationName: slideDownAndFade,
|
||||
},
|
||||
|
||||
'&[data-side="right"]': {
|
||||
animationName: slideLeftAndFade,
|
||||
},
|
||||
|
||||
'&[data-side="bottom"]': {
|
||||
animationName: slideUpAndFade,
|
||||
},
|
||||
|
||||
'&[data-side="left"]': {
|
||||
animationName: slideRightAndFade,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
export const Arrow = styled(Primitive.Arrow, {
|
||||
fill: '#000',
|
||||
})
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# Tooltip
|
||||
|
||||
```tsx
|
||||
import { Tooltip } from '@status-im/components'
|
||||
```
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import React from 'react'
|
||||
|
||||
import * as Primitive from '@radix-ui/react-tooltip'
|
||||
|
||||
import { Arrow, Content } from './styles'
|
||||
|
||||
import type { TooltipContentProps } from '@radix-ui/react-tooltip'
|
||||
|
||||
interface Props {
|
||||
label: string
|
||||
children: React.ReactNode
|
||||
side?: TooltipContentProps['side']
|
||||
sideOffset?: TooltipContentProps['sideOffset']
|
||||
}
|
||||
|
||||
const Tooltip = (props: Props) => {
|
||||
const { children, label, side = 'top', sideOffset = 5 } = props
|
||||
|
||||
return (
|
||||
<Primitive.Root delayDuration={500}>
|
||||
<Primitive.Trigger asChild>{children}</Primitive.Trigger>
|
||||
<Content side={side} sideOffset={sideOffset}>
|
||||
{label}
|
||||
<Arrow />
|
||||
</Content>
|
||||
</Primitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Tooltip }
|
||||
export type { Props as TooltipProps }
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export type { VisuallyHiddenProps } from './visually-hidden'
|
||||
export { VisuallyHidden } from './visually-hidden'
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# VisuallyHidden
|
||||
|
||||
```tsx
|
||||
import { VisuallyHidden } from '@status-im/components'
|
||||
```
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import React from 'react'
|
||||
|
||||
import { Root } from '@radix-ui/react-visually-hidden'
|
||||
|
||||
type Props = {
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
const VisuallyHidden = (props: Props) => {
|
||||
const { children } = props
|
||||
|
||||
return <Root>{children}</Root>
|
||||
}
|
||||
|
||||
export { VisuallyHidden }
|
||||
export type { Props as VisuallyHiddenProps }
|
||||
652
yarn.lock
652
yarn.lock
|
|
@ -2,73 +2,13 @@
|
|||
# yarn lockfile v1
|
||||
|
||||
|
||||
"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.16.7":
|
||||
"@babel/code-frame@^7.0.0":
|
||||
version "7.16.7"
|
||||
resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
|
||||
integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
|
||||
dependencies:
|
||||
"@babel/highlight" "^7.16.7"
|
||||
|
||||
"@babel/generator@^7.17.3":
|
||||
version "7.17.3"
|
||||
resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.3.tgz#a2c30b0c4f89858cb87050c3ffdfd36bdf443200"
|
||||
integrity sha512-+R6Dctil/MgUsZsZAkYgK+ADNSZzJRRy0TvY65T71z/CR854xHQ1EweBYXdfT+HNeN7w0cSJJEzgxZMv40pxsg==
|
||||
dependencies:
|
||||
"@babel/types" "^7.17.0"
|
||||
jsesc "^2.5.1"
|
||||
source-map "^0.5.0"
|
||||
|
||||
"@babel/helper-annotate-as-pure@^7.16.0":
|
||||
version "7.16.7"
|
||||
resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862"
|
||||
integrity sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==
|
||||
dependencies:
|
||||
"@babel/types" "^7.16.7"
|
||||
|
||||
"@babel/helper-environment-visitor@^7.16.7":
|
||||
version "7.16.7"
|
||||
resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7"
|
||||
integrity sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==
|
||||
dependencies:
|
||||
"@babel/types" "^7.16.7"
|
||||
|
||||
"@babel/helper-function-name@^7.16.7":
|
||||
version "7.16.7"
|
||||
resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz#f1ec51551fb1c8956bc8dd95f38523b6cf375f8f"
|
||||
integrity sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==
|
||||
dependencies:
|
||||
"@babel/helper-get-function-arity" "^7.16.7"
|
||||
"@babel/template" "^7.16.7"
|
||||
"@babel/types" "^7.16.7"
|
||||
|
||||
"@babel/helper-get-function-arity@^7.16.7":
|
||||
version "7.16.7"
|
||||
resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz#ea08ac753117a669f1508ba06ebcc49156387419"
|
||||
integrity sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==
|
||||
dependencies:
|
||||
"@babel/types" "^7.16.7"
|
||||
|
||||
"@babel/helper-hoist-variables@^7.16.7":
|
||||
version "7.16.7"
|
||||
resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz#86bcb19a77a509c7b77d0e22323ef588fa58c246"
|
||||
integrity sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==
|
||||
dependencies:
|
||||
"@babel/types" "^7.16.7"
|
||||
|
||||
"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.16.0":
|
||||
version "7.16.7"
|
||||
resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz#25612a8091a999704461c8a222d0efec5d091437"
|
||||
integrity sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==
|
||||
dependencies:
|
||||
"@babel/types" "^7.16.7"
|
||||
|
||||
"@babel/helper-split-export-declaration@^7.16.7":
|
||||
version "7.16.7"
|
||||
resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz#0b648c0c42da9d3920d85ad585f2778620b8726b"
|
||||
integrity sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==
|
||||
dependencies:
|
||||
"@babel/types" "^7.16.7"
|
||||
|
||||
"@babel/helper-validator-identifier@^7.16.7":
|
||||
version "7.16.7"
|
||||
resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
|
||||
|
|
@ -83,11 +23,6 @@
|
|||
chalk "^2.0.0"
|
||||
js-tokens "^4.0.0"
|
||||
|
||||
"@babel/parser@^7.16.7", "@babel/parser@^7.17.3":
|
||||
version "7.17.3"
|
||||
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.3.tgz#b07702b982990bf6fdc1da5049a23fece4c5c3d0"
|
||||
integrity sha512-7yJPvPV+ESz2IUTPbOL+YkIGyCqOyNIzdguKQuJGnH7bg1WTIifuM21YqokFt/THWh1AkCRn9IgoykTRCBVpzA==
|
||||
|
||||
"@babel/runtime-corejs3@^7.10.2":
|
||||
version "7.17.2"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.17.2.tgz#fdca2cd05fba63388babe85d349b6801b008fd13"
|
||||
|
|
@ -103,38 +38,12 @@
|
|||
dependencies:
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/template@^7.16.7":
|
||||
version "7.16.7"
|
||||
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
|
||||
integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==
|
||||
"@babel/runtime@^7.13.10":
|
||||
version "7.17.7"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.7.tgz#a5f3328dc41ff39d803f311cfe17703418cf9825"
|
||||
integrity sha512-L6rvG9GDxaLgFjg41K+5Yv9OMrU98sWe+Ykmc6FDJW/+vYZMhdOMKkISgzptMaERHvS2Y2lw9MDRm2gHhlQQoA==
|
||||
dependencies:
|
||||
"@babel/code-frame" "^7.16.7"
|
||||
"@babel/parser" "^7.16.7"
|
||||
"@babel/types" "^7.16.7"
|
||||
|
||||
"@babel/traverse@^7.4.5":
|
||||
version "7.17.3"
|
||||
resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.3.tgz#0ae0f15b27d9a92ba1f2263358ea7c4e7db47b57"
|
||||
integrity sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==
|
||||
dependencies:
|
||||
"@babel/code-frame" "^7.16.7"
|
||||
"@babel/generator" "^7.17.3"
|
||||
"@babel/helper-environment-visitor" "^7.16.7"
|
||||
"@babel/helper-function-name" "^7.16.7"
|
||||
"@babel/helper-hoist-variables" "^7.16.7"
|
||||
"@babel/helper-split-export-declaration" "^7.16.7"
|
||||
"@babel/parser" "^7.17.3"
|
||||
"@babel/types" "^7.17.0"
|
||||
debug "^4.1.0"
|
||||
globals "^11.1.0"
|
||||
|
||||
"@babel/types@^7.16.7", "@babel/types@^7.17.0":
|
||||
version "7.17.0"
|
||||
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b"
|
||||
integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==
|
||||
dependencies:
|
||||
"@babel/helper-validator-identifier" "^7.16.7"
|
||||
to-fast-properties "^2.0.0"
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@chainsafe/libp2p-noise@^5.0.0":
|
||||
version "5.0.2"
|
||||
|
|
@ -168,28 +77,6 @@
|
|||
dependencies:
|
||||
"@cspotcode/source-map-consumer" "0.8.0"
|
||||
|
||||
"@emotion/is-prop-valid@^0.8.8":
|
||||
version "0.8.8"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
|
||||
integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
|
||||
dependencies:
|
||||
"@emotion/memoize" "0.7.4"
|
||||
|
||||
"@emotion/memoize@0.7.4":
|
||||
version "0.7.4"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
|
||||
integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
|
||||
|
||||
"@emotion/stylis@^0.8.4":
|
||||
version "0.8.5"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
|
||||
integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
|
||||
|
||||
"@emotion/unitless@^0.7.4":
|
||||
version "0.7.5"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
|
||||
integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
|
||||
|
||||
"@eslint/eslintrc@^1.1.0":
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.1.0.tgz#583d12dbec5d4f22f333f9669f7d0b7c7815b4d3"
|
||||
|
|
@ -924,6 +811,366 @@
|
|||
resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
|
||||
integrity sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA=
|
||||
|
||||
"@radix-ui/popper@0.1.0":
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/popper/-/popper-0.1.0.tgz#c387a38f31b7799e1ea0d2bb1ca0c91c2931b063"
|
||||
integrity sha512-uzYeElL3w7SeNMuQpXiFlBhTT+JyaNMCwDfjKkrzugEcYrf5n52PHqncNdQPUtR42hJh8V9FsqyEDbDxkeNjJQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
csstype "^3.0.4"
|
||||
|
||||
"@radix-ui/primitive@0.1.0":
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-0.1.0.tgz#6206b97d379994f0d1929809db035733b337e543"
|
||||
integrity sha512-tqxZKybwN5Fa3VzZry4G6mXAAb9aAqKmPtnVbZpL0vsBwvOHTBwsjHVPXylocYLwEtBY9SCe665bYnNB515uoA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@radix-ui/react-accessible-icon@^0.1.4":
|
||||
version "0.1.4"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-accessible-icon/-/react-accessible-icon-0.1.4.tgz#bdbf1e3226a0e9e7778b68728b175bdc532b720c"
|
||||
integrity sha512-H9lZtGTDS9XtoQK41pSq9Meb2fI+cLqZJTj1FxusRd7NviWbDAvytVXZE2XI5OOSFHi6C4wpOghBUQym3EJacQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-visually-hidden" "0.1.4"
|
||||
|
||||
"@radix-ui/react-alert-dialog@^0.1.7":
|
||||
version "0.1.7"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-alert-dialog/-/react-alert-dialog-0.1.7.tgz#2b9379d848323f5370a8b3928dd6e5ce95f8bd34"
|
||||
integrity sha512-b0+TWr0VRWMWM7QcXvvcwbMGNzpTmvPBSBpYcoaD+QnVo3jdJt0k0bghwbYBuywzdyuRNUFf33xwah/57w09QA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/primitive" "0.1.0"
|
||||
"@radix-ui/react-compose-refs" "0.1.0"
|
||||
"@radix-ui/react-context" "0.1.1"
|
||||
"@radix-ui/react-dialog" "0.1.7"
|
||||
"@radix-ui/react-primitive" "0.1.4"
|
||||
"@radix-ui/react-slot" "0.1.2"
|
||||
|
||||
"@radix-ui/react-arrow@0.1.4":
|
||||
version "0.1.4"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-0.1.4.tgz#a871448a418cd3507d83840fdd47558cb961672b"
|
||||
integrity sha512-BB6XzAb7Ml7+wwpFdYVtZpK1BlMgqyafSQNGzhIpSZ4uXvXOHPlR5GP8M449JkeQzgQjv9Mp1AsJxFC0KuOtuA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-primitive" "0.1.4"
|
||||
|
||||
"@radix-ui/react-collapsible@^0.1.6":
|
||||
version "0.1.6"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-collapsible/-/react-collapsible-0.1.6.tgz#3eeadac476761b3c9b8dd91e8a32eb1a547e5a06"
|
||||
integrity sha512-Gkf8VuqMc6HTLzA2AxVYnyK6aMczVLpatCjdD9Lj4wlYLXCz9KtiqZYslLMeqnQFLwLyZS0WKX/pQ8j5fioIBw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/primitive" "0.1.0"
|
||||
"@radix-ui/react-compose-refs" "0.1.0"
|
||||
"@radix-ui/react-context" "0.1.1"
|
||||
"@radix-ui/react-id" "0.1.5"
|
||||
"@radix-ui/react-presence" "0.1.2"
|
||||
"@radix-ui/react-primitive" "0.1.4"
|
||||
"@radix-ui/react-use-controllable-state" "0.1.0"
|
||||
"@radix-ui/react-use-layout-effect" "0.1.0"
|
||||
|
||||
"@radix-ui/react-collection@0.1.4":
|
||||
version "0.1.4"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-0.1.4.tgz#734061ffd5bb93e88889d49b87391a73a63824c9"
|
||||
integrity sha512-3muGI15IdgaDFjOcO7xX8a35HQRBRF6LH9pS6UCeZeRmbslkVeHyJRQr2rzICBUoX7zgIA0kXyMDbpQnJGyJTA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-compose-refs" "0.1.0"
|
||||
"@radix-ui/react-context" "0.1.1"
|
||||
"@radix-ui/react-primitive" "0.1.4"
|
||||
"@radix-ui/react-slot" "0.1.2"
|
||||
|
||||
"@radix-ui/react-compose-refs@0.1.0":
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-0.1.0.tgz#cff6e780a0f73778b976acff2c2a5b6551caab95"
|
||||
integrity sha512-eyclbh+b77k+69Dk72q3694OHrn9B3QsoIRx7ywX341U9RK1ThgQjMFZoPtmZNQTksXHLNEiefR8hGVeFyInGg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@radix-ui/react-context-menu@^0.1.6":
|
||||
version "0.1.6"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-context-menu/-/react-context-menu-0.1.6.tgz#0c75f2faffec6c8697247a4b685a432b3c4d07f0"
|
||||
integrity sha512-0qa6ABaeqD+WYI+8iT0jH0QLLcV8Kv0xI+mZL4FFnG4ec9H0v+yngb5cfBBfs9e/KM8mDzFFpaeegqsQlLNqyQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/primitive" "0.1.0"
|
||||
"@radix-ui/react-context" "0.1.1"
|
||||
"@radix-ui/react-menu" "0.1.6"
|
||||
"@radix-ui/react-primitive" "0.1.4"
|
||||
"@radix-ui/react-use-callback-ref" "0.1.0"
|
||||
|
||||
"@radix-ui/react-context@0.1.1":
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-0.1.1.tgz#06996829ea124d9a1bc1dbe3e51f33588fab0875"
|
||||
integrity sha512-PkyVX1JsLBioeu0jB9WvRpDBBLtLZohVDT3BB5CTSJqActma8S8030P57mWZb4baZifMvN7KKWPAA40UmWKkQg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@radix-ui/react-dialog@0.1.7", "@radix-ui/react-dialog@^0.1.7":
|
||||
version "0.1.7"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-0.1.7.tgz#285414cf66f5bbf42bc9935314e0381abe01e7d0"
|
||||
integrity sha512-jXt8srGhHBRvEr9jhEAiwwJzWCWZoGRJ030aC9ja/gkRJbZdy0iD3FwXf+Ff4RtsZyLUMHW7VUwFOlz3Ixe1Vw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/primitive" "0.1.0"
|
||||
"@radix-ui/react-compose-refs" "0.1.0"
|
||||
"@radix-ui/react-context" "0.1.1"
|
||||
"@radix-ui/react-dismissable-layer" "0.1.5"
|
||||
"@radix-ui/react-focus-guards" "0.1.0"
|
||||
"@radix-ui/react-focus-scope" "0.1.4"
|
||||
"@radix-ui/react-id" "0.1.5"
|
||||
"@radix-ui/react-portal" "0.1.4"
|
||||
"@radix-ui/react-presence" "0.1.2"
|
||||
"@radix-ui/react-primitive" "0.1.4"
|
||||
"@radix-ui/react-slot" "0.1.2"
|
||||
"@radix-ui/react-use-controllable-state" "0.1.0"
|
||||
aria-hidden "^1.1.1"
|
||||
react-remove-scroll "^2.4.0"
|
||||
|
||||
"@radix-ui/react-dismissable-layer@0.1.5":
|
||||
version "0.1.5"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-0.1.5.tgz#9379032351e79028d472733a5cc8ba4a0ea43314"
|
||||
integrity sha512-J+fYWijkX4M4QKwf9dtu1oC0U6e6CEl8WhBp3Ad23yz2Hia0XCo6Pk/mp5CAFy4QBtQedTSkhW05AdtSOEoajQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/primitive" "0.1.0"
|
||||
"@radix-ui/react-compose-refs" "0.1.0"
|
||||
"@radix-ui/react-primitive" "0.1.4"
|
||||
"@radix-ui/react-use-body-pointer-events" "0.1.1"
|
||||
"@radix-ui/react-use-callback-ref" "0.1.0"
|
||||
"@radix-ui/react-use-escape-keydown" "0.1.0"
|
||||
|
||||
"@radix-ui/react-dropdown-menu@^0.1.6":
|
||||
version "0.1.6"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-0.1.6.tgz#3203229788cd57e552c9f19dcc7008e2b545919c"
|
||||
integrity sha512-RZhtzjWwJ4ZBN7D8ek4Zn+ilHzYuYta9yIxFnbC0pfqMnSi67IQNONo1tuuNqtFh9SRHacPKc65zo+kBBlxtdg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/primitive" "0.1.0"
|
||||
"@radix-ui/react-compose-refs" "0.1.0"
|
||||
"@radix-ui/react-context" "0.1.1"
|
||||
"@radix-ui/react-id" "0.1.5"
|
||||
"@radix-ui/react-menu" "0.1.6"
|
||||
"@radix-ui/react-primitive" "0.1.4"
|
||||
"@radix-ui/react-use-controllable-state" "0.1.0"
|
||||
|
||||
"@radix-ui/react-focus-guards@0.1.0":
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-0.1.0.tgz#ba3b6f902cba7826569f8edc21ff8223dece7def"
|
||||
integrity sha512-kRx/swAjEfBpQ3ns7J3H4uxpXuWCqN7MpALiSDOXiyo2vkWv0L9sxvbpZeTulINuE3CGMzicVMuNc/VWXjFKOg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@radix-ui/react-focus-scope@0.1.4":
|
||||
version "0.1.4"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-0.1.4.tgz#c830724e212d42ffaaa81aee49533213d09b47df"
|
||||
integrity sha512-fbA4ES3H4Wkxp+OeLhvN6SwL7mXNn/aBtUf7DRYxY9+Akrf7dRxl2ck4lgcpPsSg3zSDsEwLcY+h5cmj5yvlug==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-compose-refs" "0.1.0"
|
||||
"@radix-ui/react-primitive" "0.1.4"
|
||||
"@radix-ui/react-use-callback-ref" "0.1.0"
|
||||
|
||||
"@radix-ui/react-id@0.1.5":
|
||||
version "0.1.5"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-0.1.5.tgz#010d311bedd5a2884c1e9bb6aaaa4e6cc1d1d3b8"
|
||||
integrity sha512-IPc4H/63bes0IZ1GJJozSEkSWcDyhNGtKFWUpJ+XtaLyQ1X3x7Mf6fWwWhDcpqlYEP+5WtAvfqcyEsyjP+ZhBQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-use-layout-effect" "0.1.0"
|
||||
|
||||
"@radix-ui/react-menu@0.1.6":
|
||||
version "0.1.6"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-0.1.6.tgz#7f9521a10f6a9cd819b33b33d5ed9538d79b2e75"
|
||||
integrity sha512-ho3+bhpr3oAFkOBJ8VkUb1BcGoiZBB3OmcWPqa6i5RTUKrzNX/d6rauochu2xDlWjiRtpVuiAcsTVOeIC4FbYQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/primitive" "0.1.0"
|
||||
"@radix-ui/react-collection" "0.1.4"
|
||||
"@radix-ui/react-compose-refs" "0.1.0"
|
||||
"@radix-ui/react-context" "0.1.1"
|
||||
"@radix-ui/react-dismissable-layer" "0.1.5"
|
||||
"@radix-ui/react-focus-guards" "0.1.0"
|
||||
"@radix-ui/react-focus-scope" "0.1.4"
|
||||
"@radix-ui/react-id" "0.1.5"
|
||||
"@radix-ui/react-popper" "0.1.4"
|
||||
"@radix-ui/react-portal" "0.1.4"
|
||||
"@radix-ui/react-presence" "0.1.2"
|
||||
"@radix-ui/react-primitive" "0.1.4"
|
||||
"@radix-ui/react-roving-focus" "0.1.5"
|
||||
"@radix-ui/react-use-callback-ref" "0.1.0"
|
||||
"@radix-ui/react-use-direction" "0.1.0"
|
||||
aria-hidden "^1.1.1"
|
||||
react-remove-scroll "^2.4.0"
|
||||
|
||||
"@radix-ui/react-popper@0.1.4":
|
||||
version "0.1.4"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-0.1.4.tgz#dfc055dcd7dfae6a2eff7a70d333141d15a5d029"
|
||||
integrity sha512-18gDYof97t8UQa7zwklG1Dr8jIdj3u+rVOQLzPi9f5i1YQak/pVGkaqw8aY+iDUknKKuZniTk/7jbAJUYlKyOw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/popper" "0.1.0"
|
||||
"@radix-ui/react-arrow" "0.1.4"
|
||||
"@radix-ui/react-compose-refs" "0.1.0"
|
||||
"@radix-ui/react-context" "0.1.1"
|
||||
"@radix-ui/react-primitive" "0.1.4"
|
||||
"@radix-ui/react-use-rect" "0.1.1"
|
||||
"@radix-ui/react-use-size" "0.1.1"
|
||||
"@radix-ui/rect" "0.1.1"
|
||||
|
||||
"@radix-ui/react-portal@0.1.4":
|
||||
version "0.1.4"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-0.1.4.tgz#17bdce3d7f1a9a0b35cb5e935ab8bc562441a7d2"
|
||||
integrity sha512-MO0wRy2eYRTZ/CyOri9NANCAtAtq89DEtg90gicaTlkCfdqCLEBsLb+/q66BZQTr3xX/Vq01nnVfc/TkCqoqvw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-primitive" "0.1.4"
|
||||
"@radix-ui/react-use-layout-effect" "0.1.0"
|
||||
|
||||
"@radix-ui/react-presence@0.1.2":
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-0.1.2.tgz#9f11cce3df73cf65bc348e8b76d891f0d54c1fe3"
|
||||
integrity sha512-3BRlFZraooIUfRlyN+b/Xs5hq1lanOOo/+3h6Pwu2GMFjkGKKa4Rd51fcqGqnVlbr3jYg+WLuGyAV4KlgqwrQw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-compose-refs" "0.1.0"
|
||||
"@radix-ui/react-use-layout-effect" "0.1.0"
|
||||
|
||||
"@radix-ui/react-primitive@0.1.4":
|
||||
version "0.1.4"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-0.1.4.tgz#6c233cf08b0cb87fecd107e9efecb3f21861edc1"
|
||||
integrity sha512-6gSl2IidySupIMJFjYnDIkIWRyQdbu/AHK7rbICPani+LW4b0XdxBXc46og/iZvuwW8pjCS8I2SadIerv84xYA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-slot" "0.1.2"
|
||||
|
||||
"@radix-ui/react-roving-focus@0.1.5":
|
||||
version "0.1.5"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-0.1.5.tgz#cc48d17a36b56f253d54905b0fd60ee134cb97ee"
|
||||
integrity sha512-ClwKPS5JZE+PaHCoW7eu1onvE61pDv4kO8W4t5Ra3qMFQiTJLZMdpBQUhksN//DaVygoLirz4Samdr5Y1x1FSA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/primitive" "0.1.0"
|
||||
"@radix-ui/react-collection" "0.1.4"
|
||||
"@radix-ui/react-compose-refs" "0.1.0"
|
||||
"@radix-ui/react-context" "0.1.1"
|
||||
"@radix-ui/react-id" "0.1.5"
|
||||
"@radix-ui/react-primitive" "0.1.4"
|
||||
"@radix-ui/react-use-callback-ref" "0.1.0"
|
||||
"@radix-ui/react-use-controllable-state" "0.1.0"
|
||||
|
||||
"@radix-ui/react-slot@0.1.2":
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-0.1.2.tgz#e6f7ad9caa8ce81cc8d532c854c56f9b8b6307c8"
|
||||
integrity sha512-ADkqfL+agEzEguU3yS26jfB50hRrwf7U4VTwAOZEmi/g+ITcBWe12yM46ueS/UCIMI9Py+gFUaAdxgxafFvY2Q==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-compose-refs" "0.1.0"
|
||||
|
||||
"@radix-ui/react-tooltip@^0.1.7":
|
||||
version "0.1.7"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-0.1.7.tgz#6f8c00d6e489565d14abf209ce0fb8853c8c8ee3"
|
||||
integrity sha512-eiBUsVOHenZ0JR16tl970bB0DafJBz6mFgSGfIGIVpflFj0LIsIDiLMsYyvYdx1KwwsIUDTEZtxcPm/sWjPzqA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/primitive" "0.1.0"
|
||||
"@radix-ui/react-compose-refs" "0.1.0"
|
||||
"@radix-ui/react-context" "0.1.1"
|
||||
"@radix-ui/react-id" "0.1.5"
|
||||
"@radix-ui/react-popper" "0.1.4"
|
||||
"@radix-ui/react-portal" "0.1.4"
|
||||
"@radix-ui/react-presence" "0.1.2"
|
||||
"@radix-ui/react-primitive" "0.1.4"
|
||||
"@radix-ui/react-slot" "0.1.2"
|
||||
"@radix-ui/react-use-controllable-state" "0.1.0"
|
||||
"@radix-ui/react-use-escape-keydown" "0.1.0"
|
||||
"@radix-ui/react-use-previous" "0.1.1"
|
||||
"@radix-ui/react-use-rect" "0.1.1"
|
||||
"@radix-ui/react-visually-hidden" "0.1.4"
|
||||
|
||||
"@radix-ui/react-use-body-pointer-events@0.1.1":
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-body-pointer-events/-/react-use-body-pointer-events-0.1.1.tgz#63e7fd81ca7ffd30841deb584cd2b7f460df2597"
|
||||
integrity sha512-R8leV2AWmJokTmERM8cMXFHWSiv/fzOLhG/JLmRBhLTAzOj37EQizssq4oW0Z29VcZy2tODMi9Pk/htxwb+xpA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-use-layout-effect" "0.1.0"
|
||||
|
||||
"@radix-ui/react-use-callback-ref@0.1.0":
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-0.1.0.tgz#934b6e123330f5b3a6b116460e6662cbc663493f"
|
||||
integrity sha512-Va041McOFFl+aV+sejvl0BS2aeHx86ND9X/rVFmEFQKTXCp6xgUK0NGUAGcgBlIjnJSbMYPGEk1xKSSlVcN2Aw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@radix-ui/react-use-controllable-state@0.1.0":
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-0.1.0.tgz#4fced164acfc69a4e34fb9d193afdab973a55de1"
|
||||
integrity sha512-zv7CX/PgsRl46a52Tl45TwqwVJdmqnlQEQhaYMz/yBOD2sx2gCkCFSoF/z9mpnYWmS6DTLNTg5lIps3fV6EnXg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-use-callback-ref" "0.1.0"
|
||||
|
||||
"@radix-ui/react-use-direction@0.1.0":
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-direction/-/react-use-direction-0.1.0.tgz#97ac1d52e497c974389e7988f809238ed72e7df7"
|
||||
integrity sha512-NajpY/An9TCPSfOVkgWIdXJV+VuWl67PxB6kOKYmtNAFHvObzIoh8o0n9sAuwSAyFCZVq211FEf9gvVDRhOyiA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@radix-ui/react-use-escape-keydown@0.1.0":
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-0.1.0.tgz#dc80cb3753e9d1bd992adbad9a149fb6ea941874"
|
||||
integrity sha512-tDLZbTGFmvXaazUXXv8kYbiCcbAE8yKgng9s95d8fCO+Eundv0Jngbn/hKPhDDs4jj9ChwRX5cDDnlaN+ugYYQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-use-callback-ref" "0.1.0"
|
||||
|
||||
"@radix-ui/react-use-layout-effect@0.1.0":
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-0.1.0.tgz#ebf71bd6d2825de8f1fbb984abf2293823f0f223"
|
||||
integrity sha512-+wdeS51Y+E1q1Wmd+1xSSbesZkpVj4jsg0BojCbopWvgq5iBvixw5vgemscdh58ep98BwUbsFYnrywFhV9yrVg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@radix-ui/react-use-previous@0.1.1":
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-0.1.1.tgz#0226017f72267200f6e832a7103760e96a6db5d0"
|
||||
integrity sha512-O/ZgrDBr11dR8rhO59ED8s5zIXBRFi8MiS+CmFGfi7MJYdLbfqVOmQU90Ghf87aifEgWe6380LA69KBneaShAg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@radix-ui/react-use-rect@0.1.1":
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-0.1.1.tgz#6c15384beee59c086e75b89a7e66f3d2e583a856"
|
||||
integrity sha512-kHNNXAsP3/PeszEmM/nxBBS9Jbo93sO+xuMTcRfwzXsmxT5gDXQzAiKbZQ0EecCPtJIzqvr7dlaQi/aP1PKYqQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/rect" "0.1.1"
|
||||
|
||||
"@radix-ui/react-use-size@0.1.1":
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-0.1.1.tgz#f6b75272a5d41c3089ca78c8a2e48e5f204ef90f"
|
||||
integrity sha512-pTgWM5qKBu6C7kfKxrKPoBI2zZYZmp2cSXzpUiGM3qEBQlMLtYhaY2JXdXUCxz+XmD1YEjc8oRwvyfsD4AG4WA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@radix-ui/react-visually-hidden@0.1.4", "@radix-ui/react-visually-hidden@^0.1.4":
|
||||
version "0.1.4"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-0.1.4.tgz#6c75eae34fb5d084b503506fbfc05587ced05f03"
|
||||
integrity sha512-K/q6AEEzqeeEq/T0NPChvBqnwlp8Tl4NnQdrI/y8IOY7BRR+Ug0PEsVk6g48HJ7cA1//COugdxXXVVK/m0X1mA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@radix-ui/react-primitive" "0.1.4"
|
||||
|
||||
"@radix-ui/rect@0.1.1":
|
||||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-0.1.1.tgz#95b5ba51f469bea6b1b841e2d427e17e37d38419"
|
||||
integrity sha512-g3hnE/UcOg7REdewduRPAK88EPuLZtaq7sA9ouu8S+YEtnyFRI16jgv6GZYe3VMoQLL1T171ebmEPtDjyxWLzw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
|
||||
"@stablelib/aead@^1.0.1":
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@stablelib/aead/-/aead-1.0.1.tgz#c4b1106df9c23d1b867eb9b276d8f42d5fc4c0c3"
|
||||
|
|
@ -1040,6 +1287,11 @@
|
|||
"@stablelib/random" "^1.0.1"
|
||||
"@stablelib/wipe" "^1.0.1"
|
||||
|
||||
"@stitches/react@^1.2.7":
|
||||
version "1.2.7"
|
||||
resolved "https://registry.yarnpkg.com/@stitches/react/-/react-1.2.7.tgz#aea2403fac726db66d1740d29557e3910b1a1dc7"
|
||||
integrity sha512-6AxpUag7OW55ANzRnuy7R15FEyQeZ66fytVo3BBilFIU0mfo3t49CAMcEAL/A1SbhSj/FCdWkn/XrbjGBTJTzg==
|
||||
|
||||
"@swc/helpers@^0.2.11":
|
||||
version "0.2.14"
|
||||
resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.2.14.tgz#20288c3627442339dd3d743c944f7043ee3590f0"
|
||||
|
|
@ -1477,6 +1729,13 @@ argparse@^2.0.1:
|
|||
resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
|
||||
integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
|
||||
|
||||
aria-hidden@^1.1.1:
|
||||
version "1.1.3"
|
||||
resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.1.3.tgz#bb48de18dc84787a3c6eee113709c473c64ec254"
|
||||
integrity sha512-RhVWFtKH5BiGMycI72q2RAFMLQi8JP9bLuQXgR5a8Znp7P5KOIADSJeyfI8PCVxLEp067B2HbP5JIiI/PXIZeA==
|
||||
dependencies:
|
||||
tslib "^1.0.0"
|
||||
|
||||
aria-query@^4.2.2:
|
||||
version "4.2.2"
|
||||
resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
|
||||
|
|
@ -1601,22 +1860,6 @@ axobject-query@^2.2.0:
|
|||
resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
|
||||
integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
|
||||
|
||||
"babel-plugin-styled-components@>= 1.12.0":
|
||||
version "2.0.4"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.4.tgz#2ee2574e4044f2e6dea443111aa2f3219271b181"
|
||||
integrity sha512-qOQpu/f0cLzn6qUZ9BlIM693fMsBQt+QGbij0uHLd27FMzd2VMf0mBPr7r3CETzulXlNsHXVw5khzhnrvmPU/g==
|
||||
dependencies:
|
||||
"@babel/helper-annotate-as-pure" "^7.16.0"
|
||||
"@babel/helper-module-imports" "^7.16.0"
|
||||
babel-plugin-syntax-jsx "^6.18.0"
|
||||
lodash "^4.17.11"
|
||||
picomatch "^2.3.0"
|
||||
|
||||
babel-plugin-syntax-jsx@^6.18.0:
|
||||
version "6.18.0"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
|
||||
integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
|
||||
|
||||
balanced-match@^1.0.0:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
|
||||
|
|
@ -1811,11 +2054,6 @@ camelcase@^6.0.0:
|
|||
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
|
||||
integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
|
||||
|
||||
camelize@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b"
|
||||
integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
|
||||
|
||||
caniuse-api@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
|
||||
|
|
@ -2110,11 +2348,6 @@ crypto-browserify@^3.12.0:
|
|||
randombytes "^2.0.0"
|
||||
randomfill "^1.0.3"
|
||||
|
||||
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 sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
|
||||
|
||||
css-declaration-sorter@^6.0.3:
|
||||
version "6.1.4"
|
||||
resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.1.4.tgz#b9bfb4ed9a41f8dcca9bf7184d849ea94a8294b4"
|
||||
|
|
@ -2133,15 +2366,6 @@ css-select@^4.1.3:
|
|||
domutils "^2.8.0"
|
||||
nth-check "^2.0.1"
|
||||
|
||||
css-to-react-native@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
|
||||
integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
|
||||
dependencies:
|
||||
camelize "^1.0.0"
|
||||
css-color-keywords "^1.0.0"
|
||||
postcss-value-parser "^4.0.2"
|
||||
|
||||
css-tree@^1.1.2, css-tree@^1.1.3:
|
||||
version "1.1.3"
|
||||
resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
|
||||
|
|
@ -2216,7 +2440,7 @@ csso@^4.2.0:
|
|||
dependencies:
|
||||
css-tree "^1.1.2"
|
||||
|
||||
csstype@^3.0.2:
|
||||
csstype@^3.0.2, csstype@^3.0.4:
|
||||
version "3.0.10"
|
||||
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
|
||||
integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==
|
||||
|
|
@ -2255,7 +2479,7 @@ datastore-core@^7.0.0:
|
|||
it-take "^1.0.1"
|
||||
uint8arrays "^3.0.0"
|
||||
|
||||
debug@4.3.3, debug@^4.1.0, debug@^4.1.1, debug@^4.2.0, debug@^4.3.0, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3:
|
||||
debug@4.3.3, debug@^4.1.1, debug@^4.2.0, debug@^4.3.0, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3:
|
||||
version "4.3.3"
|
||||
resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
|
||||
integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q==
|
||||
|
|
@ -2335,6 +2559,11 @@ detect-libc@^1.0.3:
|
|||
resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
|
||||
integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
|
||||
|
||||
detect-node-es@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
|
||||
integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
|
||||
|
||||
diff@5.0.0:
|
||||
version "5.0.0"
|
||||
resolved "https://registry.yarnpkg.com/diff/-/diff-5.0.0.tgz#7ed6ad76d859d030787ec35855f5b1daf31d852b"
|
||||
|
|
@ -3092,6 +3321,11 @@ get-iterator@^1.0.2:
|
|||
resolved "https://registry.yarnpkg.com/get-iterator/-/get-iterator-1.0.2.tgz#cd747c02b4c084461fac14f48f6b45a80ed25c82"
|
||||
integrity sha512-v+dm9bNVfOYsY1OrhaCrmyOcYoSeVvbt+hHZ0Au+T+p1y+0Uyj9aMaGIeUTT6xdpRbWzDeYKvfOslPhggQMcsg==
|
||||
|
||||
get-nonce@^1.0.0:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
|
||||
integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
|
||||
|
||||
get-port@^4.2.0:
|
||||
version "4.2.0"
|
||||
resolved "https://registry.yarnpkg.com/get-port/-/get-port-4.2.0.tgz#e37368b1e863b7629c43c5a323625f95cf24b119"
|
||||
|
|
@ -3150,11 +3384,6 @@ glob@7.2.0, glob@^7.1.2, glob@^7.1.3, glob@^7.1.7:
|
|||
once "^1.3.0"
|
||||
path-is-absolute "^1.0.0"
|
||||
|
||||
globals@^11.1.0:
|
||||
version "11.12.0"
|
||||
resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
|
||||
integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
|
||||
|
||||
globals@^13.2.0, globals@^13.6.0, globals@^13.9.0:
|
||||
version "13.12.1"
|
||||
resolved "https://registry.yarnpkg.com/globals/-/globals-13.12.1.tgz#ec206be932e6c77236677127577aa8e50bf1c5cb"
|
||||
|
|
@ -3272,7 +3501,7 @@ hmac-drbg@^1.0.1:
|
|||
minimalistic-assert "^1.0.0"
|
||||
minimalistic-crypto-utils "^1.0.1"
|
||||
|
||||
hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0:
|
||||
hoist-non-react-statics@^3.3.0:
|
||||
version "3.3.2"
|
||||
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
|
||||
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
|
||||
|
|
@ -3403,6 +3632,13 @@ internal-slot@^1.0.3:
|
|||
has "^1.0.3"
|
||||
side-channel "^1.0.4"
|
||||
|
||||
invariant@^2.2.4:
|
||||
version "2.2.4"
|
||||
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
|
||||
integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
|
||||
dependencies:
|
||||
loose-envify "^1.0.0"
|
||||
|
||||
ip-address@^8.0.0:
|
||||
version "8.1.0"
|
||||
resolved "https://registry.yarnpkg.com/ip-address/-/ip-address-8.1.0.tgz#1fe9b4509b51ff7d2fbbef4d3d26994d9915a459"
|
||||
|
|
@ -3876,11 +4112,6 @@ jsbn@~0.1.0:
|
|||
resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
|
||||
integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
|
||||
|
||||
jsesc@^2.5.1:
|
||||
version "2.5.2"
|
||||
resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
|
||||
integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
|
||||
|
||||
json-parse-better-errors@^1.0.1:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
|
||||
|
|
@ -4232,7 +4463,7 @@ lodash.uniq@^4.5.0:
|
|||
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
|
||||
integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
|
||||
|
||||
lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.4:
|
||||
lodash@^4.17.15, lodash@^4.17.4:
|
||||
version "4.17.21"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
|
||||
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
|
||||
|
|
@ -4265,7 +4496,7 @@ long@^5.2.0:
|
|||
resolved "https://registry.yarnpkg.com/long/-/long-5.2.0.tgz#2696dadf4b4da2ce3f6f6b89186085d94d52fd61"
|
||||
integrity sha512-9RTUNjK60eJbx3uz+TEGF7fUr29ZDxR5QzXcyDpeSfeH28S9ycINflOgOlppit5U+4kNTe83KQnMEerw7GmE8w==
|
||||
|
||||
loose-envify@^1.1.0, loose-envify@^1.4.0:
|
||||
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
|
||||
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
|
||||
|
|
@ -5054,7 +5285,7 @@ picocolors@^1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
|
||||
integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
|
||||
|
||||
picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.0:
|
||||
picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
|
||||
version "2.3.1"
|
||||
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
|
||||
integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
|
||||
|
|
@ -5273,7 +5504,7 @@ postcss-unique-selectors@^5.0.4:
|
|||
dependencies:
|
||||
postcss-selector-parser "^6.0.5"
|
||||
|
||||
postcss-value-parser@^4.0.2, postcss-value-parser@^4.2.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==
|
||||
|
|
@ -5467,6 +5698,34 @@ react-refresh@^0.9.0:
|
|||
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.9.0.tgz#71863337adc3e5c2f8a6bfddd12ae3bfe32aafbf"
|
||||
integrity sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ==
|
||||
|
||||
react-remove-scroll-bar@^2.1.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.2.0.tgz#d4d545a7df024f75d67e151499a6ab5ac97c8cdd"
|
||||
integrity sha512-UU9ZBP1wdMR8qoUs7owiVcpaPwsQxUDC2lypP6mmixaGlARZa7ZIBx1jcuObLdhMOvCsnZcvetOho0wzPa9PYg==
|
||||
dependencies:
|
||||
react-style-singleton "^2.1.0"
|
||||
tslib "^1.0.0"
|
||||
|
||||
react-remove-scroll@^2.4.0:
|
||||
version "2.4.4"
|
||||
resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.4.4.tgz#2dfff377cf17efc00de39dad51c143fc7a1b9e3e"
|
||||
integrity sha512-EyC5ohYhaeKbThMSQxuN2i+QC5HqV3AJvNZKEdiATITexu0gHm00+5ko0ltNS1ajYJVeDgVG2baRSCei0AUWlQ==
|
||||
dependencies:
|
||||
react-remove-scroll-bar "^2.1.0"
|
||||
react-style-singleton "^2.1.0"
|
||||
tslib "^1.0.0"
|
||||
use-callback-ref "^1.2.3"
|
||||
use-sidecar "^1.0.1"
|
||||
|
||||
react-style-singleton@^2.1.0:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.1.tgz#ce7f90b67618be2b6b94902a30aaea152ce52e66"
|
||||
integrity sha512-jNRp07Jza6CBqdRKNgGhT3u9umWvils1xsuMOjZlghBDH2MU0PL2WZor4PGYjXpnRCa9DQSlHMs/xnABWOwYbA==
|
||||
dependencies:
|
||||
get-nonce "^1.0.0"
|
||||
invariant "^2.2.4"
|
||||
tslib "^1.0.0"
|
||||
|
||||
react@^17.0.0, react@^17.0.2:
|
||||
version "17.0.2"
|
||||
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
|
||||
|
|
@ -5721,11 +5980,6 @@ sha.js@^2.4.0, sha.js@^2.4.8:
|
|||
inherits "^2.0.1"
|
||||
safe-buffer "^5.0.1"
|
||||
|
||||
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"
|
||||
|
|
@ -5813,11 +6067,6 @@ source-map-support@~0.5.20:
|
|||
buffer-from "^1.0.0"
|
||||
source-map "^0.6.0"
|
||||
|
||||
source-map@^0.5.0:
|
||||
version "0.5.7"
|
||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
|
||||
integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
|
||||
|
||||
source-map@^0.6.0, source-map@^0.6.1:
|
||||
version "0.6.1"
|
||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
|
||||
|
|
@ -6025,22 +6274,6 @@ strip-json-comments@3.1.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1.
|
|||
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
|
||||
integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
|
||||
|
||||
styled-components@^5.3.1:
|
||||
version "5.3.3"
|
||||
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.3.tgz#312a3d9a549f4708f0fb0edc829eb34bde032743"
|
||||
integrity sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw==
|
||||
dependencies:
|
||||
"@babel/helper-module-imports" "^7.0.0"
|
||||
"@babel/traverse" "^7.4.5"
|
||||
"@emotion/is-prop-valid" "^0.8.8"
|
||||
"@emotion/stylis" "^0.8.4"
|
||||
"@emotion/unitless" "^0.7.4"
|
||||
babel-plugin-styled-components ">= 1.12.0"
|
||||
css-to-react-native "^3.0.0"
|
||||
hoist-non-react-statics "^3.0.0"
|
||||
shallowequal "^1.1.0"
|
||||
supports-color "^5.5.0"
|
||||
|
||||
stylehacks@^5.0.3:
|
||||
version "5.0.3"
|
||||
resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.0.3.tgz#2ef3de567bfa2be716d29a93bf3d208c133e8d04"
|
||||
|
|
@ -6056,7 +6289,7 @@ supports-color@8.1.1:
|
|||
dependencies:
|
||||
has-flag "^4.0.0"
|
||||
|
||||
supports-color@^5.3.0, supports-color@^5.5.0:
|
||||
supports-color@^5.3.0:
|
||||
version "5.5.0"
|
||||
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
|
||||
integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
|
||||
|
|
@ -6130,10 +6363,10 @@ timsort@^0.3.0:
|
|||
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
|
||||
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
|
||||
|
||||
to-fast-properties@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
|
||||
integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
|
||||
tinykeys@^1.4.0:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/tinykeys/-/tinykeys-1.4.0.tgz#c2986cd0184c86e943a6b17acc0352e42b542dff"
|
||||
integrity sha512-ysnVd2E4nWbNXIbHaUidcKGLTmNimqP0hdpsD0Ph5hPJ84ntCF6PHj+Jg3im9nZt9/hNsBg/E6m1psHc2KaPnQ==
|
||||
|
||||
to-regex-range@^5.0.1:
|
||||
version "5.0.1"
|
||||
|
|
@ -6214,7 +6447,7 @@ tsconfig-paths@^3.12.0, tsconfig-paths@^3.9.0:
|
|||
minimist "^1.2.0"
|
||||
strip-bom "^3.0.0"
|
||||
|
||||
tslib@^1.8.1:
|
||||
tslib@^1.0.0, tslib@^1.8.1, tslib@^1.9.3:
|
||||
version "1.14.1"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
|
||||
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
|
||||
|
|
@ -6299,6 +6532,19 @@ uri-js@^4.2.2:
|
|||
dependencies:
|
||||
punycode "^2.1.0"
|
||||
|
||||
use-callback-ref@^1.2.3:
|
||||
version "1.2.5"
|
||||
resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.5.tgz#6115ed242cfbaed5915499c0a9842ca2912f38a5"
|
||||
integrity sha512-gN3vgMISAgacF7sqsLPByqoePooY3n2emTH59Ur5d/M8eg4WTWu1xp8i8DHjohftIyEx0S08RiYxbffr4j8Peg==
|
||||
|
||||
use-sidecar@^1.0.1:
|
||||
version "1.0.5"
|
||||
resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.5.tgz#ffff2a17c1df42e348624b699ba6e5c220527f2b"
|
||||
integrity sha512-k9jnrjYNwN6xYLj1iaGhonDghfvmeTmYjAiGvOr7clwKfPjMXJf4/HOr7oT5tJwYafgp2tG2l3eZEOfoELiMcA==
|
||||
dependencies:
|
||||
detect-node-es "^1.1.0"
|
||||
tslib "^1.9.3"
|
||||
|
||||
utf8-byte-length@^1.0.1:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/utf8-byte-length/-/utf8-byte-length-1.0.4.tgz#f45f150c4c66eee968186505ab93fcbb8ad6bf61"
|
||||
|
|
|
|||
Loading…
Reference in New Issue