From 43d83501cd5cdc6267ae069e4f2f2d72961074c4 Mon Sep 17 00:00:00 2001 From: Max Korsunov Date: Mon, 23 Sep 2024 13:19:32 +0300 Subject: [PATCH] fix(ui): fix `styled` imports (#1802) * fix(ui): fix `styled` imports * chore: changeset --- .changeset/slow-spies-exercise.md | 5 +++++ packages/ui/.storybook/preview.jsx | 2 +- packages/ui/src/AccountSelector/AccountSelectorAddress.tsx | 2 +- packages/ui/src/AccountSelector/IbcDepositToggle.tsx | 2 +- packages/ui/src/AccountSelector/index.stories.tsx | 2 +- packages/ui/src/AccountSelector/index.tsx | 2 +- packages/ui/src/AddressViewComponent/index.stories.tsx | 2 +- packages/ui/src/AddressViewComponent/index.tsx | 2 +- packages/ui/src/AssetIcon/DelegationTokenIcon.tsx | 2 +- packages/ui/src/AssetIcon/UnbondingTokenIcon.tsx | 2 +- packages/ui/src/AssetIcon/index.tsx | 2 +- packages/ui/src/AssetSelector/Custom.tsx | 2 +- packages/ui/src/AssetSelector/ListItem.tsx | 2 +- packages/ui/src/AssetSelector/Trigger.tsx | 2 +- packages/ui/src/AssetSelector/index.tsx | 2 +- packages/ui/src/Button/index.tsx | 2 +- packages/ui/src/ButtonGroup/index.tsx | 2 +- packages/ui/src/Card/Title.tsx | 2 +- packages/ui/src/Card/index.stories.tsx | 2 +- packages/ui/src/Card/index.tsx | 2 +- packages/ui/src/CharacterTransition/index.stories.tsx | 2 +- packages/ui/src/CharacterTransition/index.tsx | 2 +- packages/ui/src/Colors.stories.tsx | 2 +- packages/ui/src/Dialog/index.stories.tsx | 2 +- packages/ui/src/Dialog/index.tsx | 2 +- packages/ui/src/Display/index.stories.tsx | 2 +- packages/ui/src/Display/index.tsx | 2 +- packages/ui/src/FormField/index.tsx | 2 +- packages/ui/src/Grid/index.stories.tsx | 2 +- packages/ui/src/Grid/index.tsx | 2 +- packages/ui/src/Identicon/index.tsx | 2 +- packages/ui/src/MenuItem/index.tsx | 2 +- packages/ui/src/Pill/index.tsx | 2 +- packages/ui/src/Popover/index.stories.tsx | 2 +- packages/ui/src/Progress/index.tsx | 2 +- packages/ui/src/SegmentedControl/index.tsx | 2 +- packages/ui/src/Slider/index.tsx | 2 +- packages/ui/src/SwapInput/index.tsx | 2 +- packages/ui/src/Table/index.tsx | 2 +- packages/ui/src/Tabs/index.tsx | 2 +- packages/ui/src/Text/index.stories.tsx | 2 +- packages/ui/src/Text/index.tsx | 2 +- packages/ui/src/TextInput/index.tsx | 2 +- packages/ui/src/Toggle/index.tsx | 2 +- packages/ui/src/Tooltip/index.tsx | 2 +- packages/ui/src/ValueInput/index.tsx | 2 +- packages/ui/src/ValueViewComponent/index.tsx | 2 +- packages/ui/src/WalletBalance/index.tsx | 2 +- packages/ui/src/utils/Shrink0.tsx | 2 +- packages/ui/src/utils/menuItem.ts | 2 +- packages/ui/src/utils/popover.ts | 2 +- 51 files changed, 55 insertions(+), 50 deletions(-) create mode 100644 .changeset/slow-spies-exercise.md diff --git a/.changeset/slow-spies-exercise.md b/.changeset/slow-spies-exercise.md new file mode 100644 index 000000000..d04e25b56 --- /dev/null +++ b/.changeset/slow-spies-exercise.md @@ -0,0 +1,5 @@ +--- +'@penumbra-zone/ui': minor +--- + +Fix the issue of UI package not being build correctly for some server-side environments diff --git a/packages/ui/.storybook/preview.jsx b/packages/ui/.storybook/preview.jsx index 367765865..ff81811e6 100644 --- a/packages/ui/.storybook/preview.jsx +++ b/packages/ui/.storybook/preview.jsx @@ -5,7 +5,7 @@ import { ConditionalWrap } from '../src/ConditionalWrap'; import { PenumbraUIProvider } from '../src/PenumbraUIProvider'; import { Density } from '../src/Density'; import { Tabs } from '../src/Tabs'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; import '../styles/globals.css'; const Column = styled.div` diff --git a/packages/ui/src/AccountSelector/AccountSelectorAddress.tsx b/packages/ui/src/AccountSelector/AccountSelectorAddress.tsx index 05fcdfff1..1c8da051f 100644 --- a/packages/ui/src/AccountSelector/AccountSelectorAddress.tsx +++ b/packages/ui/src/AccountSelector/AccountSelectorAddress.tsx @@ -1,6 +1,6 @@ import type { Address } from '@penumbra-zone/protobuf/penumbra/core/keys/v1/keys_pb'; import { bech32mAddress } from '@penumbra-zone/bech32m/penumbra'; -import styled, { DefaultTheme } from 'styled-components'; +import { styled, DefaultTheme } from 'styled-components'; import { useDensity } from '../hooks/useDensity'; import { Density } from '../types/Density'; import { CopyToClipboardButton } from '../CopyToClipboardButton'; diff --git a/packages/ui/src/AccountSelector/IbcDepositToggle.tsx b/packages/ui/src/AccountSelector/IbcDepositToggle.tsx index 7dfe8a4f5..cffd7d57a 100644 --- a/packages/ui/src/AccountSelector/IbcDepositToggle.tsx +++ b/packages/ui/src/AccountSelector/IbcDepositToggle.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { Toggle } from '../Toggle'; import { Text } from '../Text'; import { Tooltip } from '../Tooltip'; diff --git a/packages/ui/src/AccountSelector/index.stories.tsx b/packages/ui/src/AccountSelector/index.stories.tsx index 02c189eb1..a05b53a3a 100644 --- a/packages/ui/src/AccountSelector/index.stories.tsx +++ b/packages/ui/src/AccountSelector/index.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { AccountSelector } from '.'; import { Address } from '@penumbra-zone/protobuf/penumbra/core/keys/v1/keys_pb'; import { Text } from '../Text'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; const u8 = (length: number) => Uint8Array.from({ length }, () => Math.floor(Math.random() * 256)); diff --git a/packages/ui/src/AccountSelector/index.tsx b/packages/ui/src/AccountSelector/index.tsx index 255105c3d..958244105 100644 --- a/packages/ui/src/AccountSelector/index.tsx +++ b/packages/ui/src/AccountSelector/index.tsx @@ -1,6 +1,6 @@ import type { Address } from '@penumbra-zone/protobuf/penumbra/core/keys/v1/keys_pb'; import { TextInput } from '../TextInput'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { body } from '../utils/typography'; import { Density } from '../Density'; import { Button } from '../Button'; diff --git a/packages/ui/src/AddressViewComponent/index.stories.tsx b/packages/ui/src/AddressViewComponent/index.stories.tsx index 9130b1b4b..0df3f9a1d 100644 --- a/packages/ui/src/AddressViewComponent/index.stories.tsx +++ b/packages/ui/src/AddressViewComponent/index.stories.tsx @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { AddressViewComponent } from '.'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { ADDRESS_VIEW_DECODED, ADDRESS_VIEW_OPAQUE } from '../utils/bufs'; const MaxWidthWrapper = styled.div` diff --git a/packages/ui/src/AddressViewComponent/index.tsx b/packages/ui/src/AddressViewComponent/index.tsx index bd3e8679f..687efe139 100644 --- a/packages/ui/src/AddressViewComponent/index.tsx +++ b/packages/ui/src/AddressViewComponent/index.tsx @@ -1,7 +1,7 @@ import { AddressIcon } from './AddressIcon'; import { AddressView } from '@penumbra-zone/protobuf/penumbra/core/keys/v1/keys_pb'; import { bech32mAddress } from '@penumbra-zone/bech32m/penumbra'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { Text } from '../Text'; import { CopyToClipboardButton } from '../CopyToClipboardButton'; import { Shrink0 } from '../utils/Shrink0'; diff --git a/packages/ui/src/AssetIcon/DelegationTokenIcon.tsx b/packages/ui/src/AssetIcon/DelegationTokenIcon.tsx index aa8bc12b0..58dd68ce9 100644 --- a/packages/ui/src/AssetIcon/DelegationTokenIcon.tsx +++ b/packages/ui/src/AssetIcon/DelegationTokenIcon.tsx @@ -1,5 +1,5 @@ import { assetPatterns } from '@penumbra-zone/types/assets'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; const Svg = styled.svg.attrs({ id: 'delegation', diff --git a/packages/ui/src/AssetIcon/UnbondingTokenIcon.tsx b/packages/ui/src/AssetIcon/UnbondingTokenIcon.tsx index a5f2e4198..58b302bf0 100644 --- a/packages/ui/src/AssetIcon/UnbondingTokenIcon.tsx +++ b/packages/ui/src/AssetIcon/UnbondingTokenIcon.tsx @@ -1,5 +1,5 @@ import { assetPatterns } from '@penumbra-zone/types/assets'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; const Svg = styled.svg.attrs({ id: 'unbonding', diff --git a/packages/ui/src/AssetIcon/index.tsx b/packages/ui/src/AssetIcon/index.tsx index 515593a94..b54e3abba 100644 --- a/packages/ui/src/AssetIcon/index.tsx +++ b/packages/ui/src/AssetIcon/index.tsx @@ -1,5 +1,5 @@ import { ReactNode } from 'react'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { Metadata } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb'; import { getDisplay } from '@penumbra-zone/getters/metadata'; import { assetPatterns } from '@penumbra-zone/types/assets'; diff --git a/packages/ui/src/AssetSelector/Custom.tsx b/packages/ui/src/AssetSelector/Custom.tsx index 0735f4268..89630c463 100644 --- a/packages/ui/src/AssetSelector/Custom.tsx +++ b/packages/ui/src/AssetSelector/Custom.tsx @@ -1,5 +1,5 @@ import { ReactNode, useId, useState } from 'react'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { RadioGroup } from '@radix-ui/react-radio-group'; import { Dialog } from '../Dialog'; import { IsAnimatingProvider } from '../IsAnimatingProvider'; diff --git a/packages/ui/src/AssetSelector/ListItem.tsx b/packages/ui/src/AssetSelector/ListItem.tsx index 9d94ba325..315d7895d 100644 --- a/packages/ui/src/AssetSelector/ListItem.tsx +++ b/packages/ui/src/AssetSelector/ListItem.tsx @@ -1,5 +1,5 @@ import { RadioGroupItem } from '@radix-ui/react-radio-group'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { motion } from 'framer-motion'; import { AssetIcon } from '../AssetIcon'; import { Text } from '../Text'; diff --git a/packages/ui/src/AssetSelector/Trigger.tsx b/packages/ui/src/AssetSelector/Trigger.tsx index 033d1dbec..c5acc88a4 100644 --- a/packages/ui/src/AssetSelector/Trigger.tsx +++ b/packages/ui/src/AssetSelector/Trigger.tsx @@ -1,5 +1,5 @@ import { forwardRef, MouseEventHandler } from 'react'; -import styled, { css } from 'styled-components'; +import { styled, css } from 'styled-components'; import { ChevronsUpDownIcon } from 'lucide-react'; import { motion } from 'framer-motion'; import { getMetadataFromBalancesResponse } from '@penumbra-zone/getters/balances-response'; diff --git a/packages/ui/src/AssetSelector/index.tsx b/packages/ui/src/AssetSelector/index.tsx index 23c0e2e8d..cfc6955ec 100644 --- a/packages/ui/src/AssetSelector/index.tsx +++ b/packages/ui/src/AssetSelector/index.tsx @@ -1,5 +1,5 @@ import { useMemo, useState } from 'react'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { Metadata } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb'; import { BalancesResponse } from '@penumbra-zone/protobuf/penumbra/view/v1/view_pb'; diff --git a/packages/ui/src/Button/index.tsx b/packages/ui/src/Button/index.tsx index 300533064..3c87520f4 100644 --- a/packages/ui/src/Button/index.tsx +++ b/packages/ui/src/Button/index.tsx @@ -1,5 +1,5 @@ import { FC, forwardRef, MouseEventHandler } from 'react'; -import styled, { css, DefaultTheme } from 'styled-components'; +import { styled, css, DefaultTheme } from 'styled-components'; import { asTransientProps } from '../utils/asTransientProps'; import { Priority, focusOutline, overlays, buttonBase } from '../utils/button'; import { getBackgroundColor } from './helpers'; diff --git a/packages/ui/src/ButtonGroup/index.tsx b/packages/ui/src/ButtonGroup/index.tsx index 29b947ec5..ab2de464b 100644 --- a/packages/ui/src/ButtonGroup/index.tsx +++ b/packages/ui/src/ButtonGroup/index.tsx @@ -2,7 +2,7 @@ import { LucideIcon } from 'lucide-react'; import { MouseEventHandler } from 'react'; import { ActionType } from '../utils/ActionType'; import { Button } from '../Button'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { media } from '../utils/media'; import { Density } from '../types/Density'; import { useDensity } from '../hooks/useDensity'; diff --git a/packages/ui/src/Card/Title.tsx b/packages/ui/src/Card/Title.tsx index 21471c0fd..6730c61fc 100644 --- a/packages/ui/src/Card/Title.tsx +++ b/packages/ui/src/Card/Title.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { large } from '../utils/typography'; import { ReactNode } from 'react'; import { CharacterTransition } from '../CharacterTransition'; diff --git a/packages/ui/src/Card/index.stories.tsx b/packages/ui/src/Card/index.stories.tsx index cf191ee55..3edbfc4bc 100644 --- a/packages/ui/src/Card/index.stories.tsx +++ b/packages/ui/src/Card/index.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Card } from '.'; import storiesBg from './storiesBg.jpg'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { Text } from '../Text'; import { FormField } from '../FormField'; import { TextInput } from '../TextInput'; diff --git a/packages/ui/src/Card/index.tsx b/packages/ui/src/Card/index.tsx index b16e2674f..2fc9adeae 100644 --- a/packages/ui/src/Card/index.tsx +++ b/packages/ui/src/Card/index.tsx @@ -1,5 +1,5 @@ import { ReactNode } from 'react'; -import styled, { WebTarget } from 'styled-components'; +import { styled, WebTarget } from 'styled-components'; import { hexOpacity } from '../utils/hexOpacity'; import { motion } from 'framer-motion'; import { Title } from './Title'; diff --git a/packages/ui/src/CharacterTransition/index.stories.tsx b/packages/ui/src/CharacterTransition/index.stories.tsx index 54f43237d..a60f888af 100644 --- a/packages/ui/src/CharacterTransition/index.stories.tsx +++ b/packages/ui/src/CharacterTransition/index.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; import { CharacterTransition } from '.'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; const WhiteTextWrapper = styled.div` color: ${props => props.theme.color.text.primary}; diff --git a/packages/ui/src/CharacterTransition/index.tsx b/packages/ui/src/CharacterTransition/index.tsx index 3dcd772b1..c41590149 100644 --- a/packages/ui/src/CharacterTransition/index.tsx +++ b/packages/ui/src/CharacterTransition/index.tsx @@ -1,6 +1,6 @@ import { motion } from 'framer-motion'; import { Fragment, memo } from 'react'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; /** * Since we're splitting individual characters and wrapping them in ``s, diff --git a/packages/ui/src/Colors.stories.tsx b/packages/ui/src/Colors.stories.tsx index c9da48399..a4570881c 100644 --- a/packages/ui/src/Colors.stories.tsx +++ b/packages/ui/src/Colors.stories.tsx @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Grid } from './Grid'; import { Text } from './Text'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; import type { ColorVariant, Color as TColor, TextColorVariant } from './PenumbraUIProvider/theme'; import { Fragment } from 'react'; import { media } from './utils/media'; diff --git a/packages/ui/src/Dialog/index.stories.tsx b/packages/ui/src/Dialog/index.stories.tsx index 370d4bb00..f51cfad8b 100644 --- a/packages/ui/src/Dialog/index.stories.tsx +++ b/packages/ui/src/Dialog/index.stories.tsx @@ -4,7 +4,7 @@ import { Dialog } from '.'; import { Button } from '../Button'; import { ComponentType } from 'react'; import { Text } from '../Text'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { Ban, Handshake, ThumbsUp } from 'lucide-react'; const WhiteTextWrapper = styled.div` diff --git a/packages/ui/src/Dialog/index.tsx b/packages/ui/src/Dialog/index.tsx index 4b9ba3c1d..49891b372 100644 --- a/packages/ui/src/Dialog/index.tsx +++ b/packages/ui/src/Dialog/index.tsx @@ -1,5 +1,5 @@ import { createContext, ReactNode, useContext } from 'react'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; import * as RadixDialog from '@radix-ui/react-dialog'; import { Text } from '../Text'; import { X } from 'lucide-react'; diff --git a/packages/ui/src/Display/index.stories.tsx b/packages/ui/src/Display/index.stories.tsx index d3a938c7f..00265605b 100644 --- a/packages/ui/src/Display/index.stories.tsx +++ b/packages/ui/src/Display/index.stories.tsx @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Display } from '.'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { Text } from '../Text'; const meta: Meta = { diff --git a/packages/ui/src/Display/index.tsx b/packages/ui/src/Display/index.tsx index 1c82dcc49..758831e7b 100644 --- a/packages/ui/src/Display/index.tsx +++ b/packages/ui/src/Display/index.tsx @@ -1,5 +1,5 @@ import { ReactNode } from 'react'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { media } from '../utils/media'; const Root = styled.section` diff --git a/packages/ui/src/FormField/index.tsx b/packages/ui/src/FormField/index.tsx index 0012e4d9f..552df3f89 100644 --- a/packages/ui/src/FormField/index.tsx +++ b/packages/ui/src/FormField/index.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { small, strong } from '../utils/typography'; import { ReactNode } from 'react'; import { DisabledContext } from '../utils/DisabledContext'; diff --git a/packages/ui/src/Grid/index.stories.tsx b/packages/ui/src/Grid/index.stories.tsx index 14f95a435..68ae46aaa 100644 --- a/packages/ui/src/Grid/index.stories.tsx +++ b/packages/ui/src/Grid/index.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Grid } from '.'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { Text } from '../Text'; const meta: Meta = { diff --git a/packages/ui/src/Grid/index.tsx b/packages/ui/src/Grid/index.tsx index 049d47046..3444298f9 100644 --- a/packages/ui/src/Grid/index.tsx +++ b/packages/ui/src/Grid/index.tsx @@ -1,5 +1,5 @@ import { PropsWithChildren } from 'react'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { AsTransientProps, asTransientProps } from '../utils/asTransientProps'; import { media } from '../utils/media'; diff --git a/packages/ui/src/Identicon/index.tsx b/packages/ui/src/Identicon/index.tsx index 3959a760f..89671bd9d 100644 --- a/packages/ui/src/Identicon/index.tsx +++ b/packages/ui/src/Identicon/index.tsx @@ -1,6 +1,6 @@ import { useMemo } from 'react'; import { generateGradient, generateSolidColor } from './generate'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; /** * The view box size is separate from the passed-in `size` prop. diff --git a/packages/ui/src/MenuItem/index.tsx b/packages/ui/src/MenuItem/index.tsx index 419ad1d50..96341d4ff 100644 --- a/packages/ui/src/MenuItem/index.tsx +++ b/packages/ui/src/MenuItem/index.tsx @@ -2,7 +2,7 @@ import type { LucideIcon } from 'lucide-react'; import type { FC, MouseEventHandler } from 'react'; import { MenuItem as SharedMenuItem, DropdownMenuItemBase } from '../utils/menuItem'; import { Text } from '../Text'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { asTransientProps } from '../utils/asTransientProps.ts'; const IconAdornment = styled.i` diff --git a/packages/ui/src/Pill/index.tsx b/packages/ui/src/Pill/index.tsx index 1f02fae38..41947b357 100644 --- a/packages/ui/src/Pill/index.tsx +++ b/packages/ui/src/Pill/index.tsx @@ -1,4 +1,4 @@ -import styled, { DefaultTheme } from 'styled-components'; +import { styled, DefaultTheme } from 'styled-components'; import { asTransientProps } from '../utils/asTransientProps'; import { ReactNode } from 'react'; import { body, technical, detail, detailTechnical } from '../utils/typography'; diff --git a/packages/ui/src/Popover/index.stories.tsx b/packages/ui/src/Popover/index.stories.tsx index 5d06fb031..70719d36c 100644 --- a/packages/ui/src/Popover/index.stories.tsx +++ b/packages/ui/src/Popover/index.stories.tsx @@ -4,7 +4,7 @@ import { Popover } from '.'; import { Button } from '../Button'; import { ComponentType, useState } from 'react'; import { Text } from '../Text'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { Shield } from 'lucide-react'; import { Density } from '../Density'; diff --git a/packages/ui/src/Progress/index.tsx b/packages/ui/src/Progress/index.tsx index 00f37a3d0..585823426 100644 --- a/packages/ui/src/Progress/index.tsx +++ b/packages/ui/src/Progress/index.tsx @@ -1,5 +1,5 @@ import * as ProgressPrimitive from '@radix-ui/react-progress'; -import styled, { type DefaultTheme, keyframes } from 'styled-components'; +import { styled, type DefaultTheme, keyframes } from 'styled-components'; export const infiniteLoading = keyframes` from { diff --git a/packages/ui/src/SegmentedControl/index.tsx b/packages/ui/src/SegmentedControl/index.tsx index 77acd3a6a..6731175c5 100644 --- a/packages/ui/src/SegmentedControl/index.tsx +++ b/packages/ui/src/SegmentedControl/index.tsx @@ -1,4 +1,4 @@ -import styled, { DefaultTheme } from 'styled-components'; +import { styled, DefaultTheme } from 'styled-components'; import { button } from '../utils/typography'; import { focusOutline, overlays, buttonBase } from '../utils/button'; import { Density } from '../types/Density'; diff --git a/packages/ui/src/Slider/index.tsx b/packages/ui/src/Slider/index.tsx index 637708b83..38eb66758 100644 --- a/packages/ui/src/Slider/index.tsx +++ b/packages/ui/src/Slider/index.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import styled, { css } from 'styled-components'; +import { styled, css } from 'styled-components'; import * as RadixSlider from '@radix-ui/react-slider'; import { detail, detailTechnical } from '../utils/typography'; import { theme } from '../PenumbraUIProvider/theme'; diff --git a/packages/ui/src/SwapInput/index.tsx b/packages/ui/src/SwapInput/index.tsx index d3c6bc6df..48b427ebc 100644 --- a/packages/ui/src/SwapInput/index.tsx +++ b/packages/ui/src/SwapInput/index.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { ArrowLeftRight } from 'lucide-react'; import { Metadata } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb'; import { BalancesResponse } from '@penumbra-zone/protobuf/penumbra/view/v1/view_pb'; diff --git a/packages/ui/src/Table/index.tsx b/packages/ui/src/Table/index.tsx index 281272712..b3ce82242 100644 --- a/packages/ui/src/Table/index.tsx +++ b/packages/ui/src/Table/index.tsx @@ -1,5 +1,5 @@ import { PropsWithChildren, ReactNode } from 'react'; -import styled, { css } from 'styled-components'; +import { styled, css } from 'styled-components'; import { tableHeading, tableItem } from '../utils/typography'; import { Density } from '../types/Density'; import { useDensity } from '../hooks/useDensity'; diff --git a/packages/ui/src/Tabs/index.tsx b/packages/ui/src/Tabs/index.tsx index c187cc93f..877574013 100644 --- a/packages/ui/src/Tabs/index.tsx +++ b/packages/ui/src/Tabs/index.tsx @@ -1,4 +1,4 @@ -import styled, { css, DefaultTheme } from 'styled-components'; +import { styled, css, DefaultTheme } from 'styled-components'; import { tab, tabSmall } from '../utils/typography'; import { motion } from 'framer-motion'; import { useId } from 'react'; diff --git a/packages/ui/src/Text/index.stories.tsx b/packages/ui/src/Text/index.stories.tsx index c830404c4..d9163cf1a 100644 --- a/packages/ui/src/Text/index.stories.tsx +++ b/packages/ui/src/Text/index.stories.tsx @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Text } from '.'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { useArgs } from '@storybook/preview-api'; const meta: Meta = { diff --git a/packages/ui/src/Text/index.tsx b/packages/ui/src/Text/index.tsx index dc6efc562..8083490dd 100644 --- a/packages/ui/src/Text/index.tsx +++ b/packages/ui/src/Text/index.tsx @@ -1,4 +1,4 @@ -import styled, { css, DefaultTheme, WebTarget } from 'styled-components'; +import { styled, css, DefaultTheme, WebTarget } from 'styled-components'; import { body, detail, diff --git a/packages/ui/src/TextInput/index.tsx b/packages/ui/src/TextInput/index.tsx index 5b1d8aef1..32b82da61 100644 --- a/packages/ui/src/TextInput/index.tsx +++ b/packages/ui/src/TextInput/index.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { small } from '../utils/typography'; import { ActionType, getOutlineColorByActionType } from '../utils/ActionType'; import { useDisabled } from '../hooks/useDisabled'; diff --git a/packages/ui/src/Toggle/index.tsx b/packages/ui/src/Toggle/index.tsx index 73c9f1d25..f1ef623a2 100644 --- a/packages/ui/src/Toggle/index.tsx +++ b/packages/ui/src/Toggle/index.tsx @@ -1,6 +1,6 @@ import * as RadixToggle from '@radix-ui/react-toggle'; import { useDisabled } from '../hooks/useDisabled'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { buttonBase } from '../utils/button'; import { useDensity } from '../hooks/useDensity'; import { Density } from '../types/Density'; diff --git a/packages/ui/src/Tooltip/index.tsx b/packages/ui/src/Tooltip/index.tsx index 0ccd6fcb4..b356c1c81 100644 --- a/packages/ui/src/Tooltip/index.tsx +++ b/packages/ui/src/Tooltip/index.tsx @@ -1,6 +1,6 @@ import * as RadixTooltip from '@radix-ui/react-tooltip'; import { ReactNode } from 'react'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { Text } from '../Text'; import { buttonBase } from '../utils/button'; import { small } from '../utils/typography'; diff --git a/packages/ui/src/ValueInput/index.tsx b/packages/ui/src/ValueInput/index.tsx index 49335ecb8..23b69d932 100644 --- a/packages/ui/src/ValueInput/index.tsx +++ b/packages/ui/src/ValueInput/index.tsx @@ -9,7 +9,7 @@ import { BalancesResponse } from '@penumbra-zone/protobuf/penumbra/view/v1/view_ import { getBalanceView } from '@penumbra-zone/getters/balances-response'; import { fromValueView } from '@penumbra-zone/types/amount'; import { Density } from '../Density'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; const SelectorWrapper = styled.div` padding-top: ${props => props.theme.spacing(2)}; diff --git a/packages/ui/src/ValueViewComponent/index.tsx b/packages/ui/src/ValueViewComponent/index.tsx index 2d1a2f549..b86162d21 100644 --- a/packages/ui/src/ValueViewComponent/index.tsx +++ b/packages/ui/src/ValueViewComponent/index.tsx @@ -1,5 +1,5 @@ import { ReactNode } from 'react'; -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { ValueView } from '@penumbra-zone/protobuf/penumbra/core/asset/v1/asset_pb'; import { getMetadata } from '@penumbra-zone/getters/value-view'; import { getFormattedAmtFromValueView } from '@penumbra-zone/types/value-view'; diff --git a/packages/ui/src/WalletBalance/index.tsx b/packages/ui/src/WalletBalance/index.tsx index f7573e0e8..c76cb8c02 100644 --- a/packages/ui/src/WalletBalance/index.tsx +++ b/packages/ui/src/WalletBalance/index.tsx @@ -1,5 +1,5 @@ import type { MouseEventHandler } from 'react'; -import styled, { type DefaultTheme } from 'styled-components'; +import { styled, type DefaultTheme } from 'styled-components'; import { Wallet } from 'lucide-react'; import type { BalancesResponse } from '@penumbra-zone/protobuf/penumbra/view/v1/view_pb'; import { getFormattedAmtFromValueView } from '@penumbra-zone/types/value-view'; diff --git a/packages/ui/src/utils/Shrink0.tsx b/packages/ui/src/utils/Shrink0.tsx index 11b6a178e..bf74b28de 100644 --- a/packages/ui/src/utils/Shrink0.tsx +++ b/packages/ui/src/utils/Shrink0.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; /** * Utility component for wrapping other markup in a `flex-shrink: 0` container. diff --git a/packages/ui/src/utils/menuItem.ts b/packages/ui/src/utils/menuItem.ts index 83792d23d..26458713b 100644 --- a/packages/ui/src/utils/menuItem.ts +++ b/packages/ui/src/utils/menuItem.ts @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import { styled } from 'styled-components'; import { ActionType, getColorByActionType, getOutlineColorByActionType } from './ActionType.ts'; export interface DropdownMenuItemBase { diff --git a/packages/ui/src/utils/popover.ts b/packages/ui/src/utils/popover.ts index e5ed4637d..d313df907 100644 --- a/packages/ui/src/utils/popover.ts +++ b/packages/ui/src/utils/popover.ts @@ -1,4 +1,4 @@ -import styled, { keyframes } from 'styled-components'; +import { styled, keyframes } from 'styled-components'; export const scaleIn = keyframes` from {