fix(ui): fix styled imports (#1802)

* fix(ui): fix `styled` imports

* chore: changeset

.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

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`

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';

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';

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));
 

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';

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`

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';

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',

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',

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';

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';

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';

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';

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';
 

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';

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';

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';

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';

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';

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};

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 `<span />`s,

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';

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`

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';

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<typeof Display> = {

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`

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';

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<typeof Grid> = {

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';
 

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.

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`

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';

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';
 

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 {

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';

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';

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';

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';

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';

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<typeof Text> = {

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,

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';

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';

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';

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)};

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';

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';

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.

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 {

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 {