diff --git a/.changeset/slow-spies-exercise.md b/.changeset/slow-spies-exercise.md
new file mode 100644
index 0000000000..d04e25b562
--- /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 3677658652..ff81811e65 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 05fcdfff1f..1c8da051fe 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 7dfe8a4f54..cffd7d57ab 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 02c189eb15..a05b53a3af 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 255105c3db..9582441058 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 9130b1b4b6..0df3f9a1de 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 bd3e8679f3..687efe1391 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 aa8bc12b08..58dd68ce9d 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 a5f2e41982..58b302bf09 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 515593a94e..b54e3abbab 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 0735f42689..89630c4630 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 9d94ba325d..315d7895d6 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 033d1dbecf..c5acc88a4f 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 23c0e2e8d2..cfc6955ec4 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 300533064b..3c87520f47 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 29b947ec57..ab2de464b7 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 21471c0fde..6730c61fc5 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 cf191ee559..3edbfc4bcb 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 b16e2674fc..2fc9adeae8 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 54f43237d7..a60f888afe 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 3dcd772b14..c415901492 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 `<span />`s,
diff --git a/packages/ui/src/Colors.stories.tsx b/packages/ui/src/Colors.stories.tsx
index c9da483999..a4570881c5 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 370d4bb00b..f51cfad8be 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 4b9ba3c1d4..49891b3728 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 d3a938c7fc..00265605b3 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<typeof Display> = {
diff --git a/packages/ui/src/Display/index.tsx b/packages/ui/src/Display/index.tsx
index 1c82dcc497..758831e7bc 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 0012e4d9f9..552df3f891 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 14f95a435b..68ae46aaa0 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<typeof Grid> = {
diff --git a/packages/ui/src/Grid/index.tsx b/packages/ui/src/Grid/index.tsx
index 049d470463..3444298f91 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 3959a760fd..89671bd9d9 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 419ad1d50f..96341d4ff1 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 1f02fae387..41947b357f 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 5d06fb031d..70719d36c5 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 00f37a3d06..585823426a 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 77acd3a6a2..6731175c56 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 637708b833..38eb66758d 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 d3c6bc6df2..48b427ebcf 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 2812727126..b3ce822426 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 c187cc93fd..877574013d 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 c830404c43..d9163cf1ac 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<typeof Text> = {
diff --git a/packages/ui/src/Text/index.tsx b/packages/ui/src/Text/index.tsx
index dc6efc562d..8083490dd8 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 5b1d8aef15..32b82da61d 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 73c9f1d254..f1ef623a2e 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 0ccd6fcb41..b356c1c814 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 49335ecb88..23b69d932f 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 2d1a2f5492..b86162d21d 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 f7573e0e89..c76cb8c026 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 11b6a178e0..bf74b28ded 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 83792d23d3..26458713bf 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 e5ed4637d7..d313df9078 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 {