chore: use named export for styled-components

Author: joshuaellis

docs/.storybook/preview.tsx

@@ -6,7 +6,7 @@ import { parse } from 'qs';
 import { DesignSystemProvider, Box, darkTheme, lightTheme, type BoxProps } from '@strapi/design-system';
 
 import { DocsContainer, Unstyled } from '@storybook/blocks';
-import styled, { DefaultTheme } from 'styled-components';
+import { styled, DefaultTheme } from 'styled-components';
 import { MARKDOWN_OVERRIDES, Markdown } from '../components/Markdown';
 
 const createCustomTheme = (theme: DefaultTheme, base: 'light' | 'dark' = 'light') => {

docs/components/Image.tsx

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef } from 'react';
 
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 interface ImageProps extends ComponentPropsWithoutRef<'img'> {}
 

docs/components/Markdown.tsx

@@ -1,6 +1,6 @@
 import { Markdown as MarkdownImpl } from '@storybook/blocks';
 import { BaseLink } from '@strapi/design-system';
-import styled, { css } from 'styled-components';
+import { styled, css } from 'styled-components';
 
 import { DeprecationNotice } from './DeprecationNotice';
 import { Image } from './Image';

docs/components/Typescale.tsx

@@ -1,5 +1,5 @@
 import { Typography } from '@strapi/design-system';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 const TEXT_VARIANTS = ['alpha', 'beta', 'delta', 'epsilon', 'omega', 'pi', 'sigma'] as const;
 

docs/components/Typography.tsx

@@ -1,5 +1,5 @@
 import { Typography, TypographyProps } from '@strapi/design-system';
-import styled, { css } from 'styled-components';
+import { styled, css } from 'styled-components';
 
 const H1 = (props: TypographyProps) => (
   <Typography tag="h1" variant="alpha" textColor="neutral800" marginBottom="0.5em" {...props} />

docs/stories/foundations/icons/Icons.stories.tsx

@@ -1,6 +1,6 @@
 import { Typography, lightTheme } from '@strapi/design-system';
 import * as Icons from '@strapi/icons';
-import styled, { DefaultTheme } from 'styled-components';
+import { styled, type DefaultTheme } from 'styled-components';
 
 import type { Meta, StoryObj } from '@storybook/react';
 

docs/stories/foundations/icons/Symbols.stories.tsx

@@ -1,6 +1,6 @@
 import { Typography } from '@strapi/design-system';
 import * as Icons from '@strapi/icons/symbols';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import type { Meta, StoryObj } from '@storybook/react';
 

packages/strapi-design-system/src/Accordion/Accordion.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import styled, { DefaultTheme } from 'styled-components';
+import { styled, type DefaultTheme } from 'styled-components';
 
 import { AccordionContext } from './AccordionContext';
 import { AccordionDescription, AccordionTitle } from './AccordionToggle';

packages/strapi-design-system/src/Accordion/AccordionGroup.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { AccordionWrapper } from './Accordion';
 import { Box, BoxComponent } from '../Box';

packages/strapi-design-system/src/Accordion/AccordionToggle.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { CaretDown } from '@strapi/icons';
-import styled, { DefaultTheme } from 'styled-components';
+import { styled, type DefaultTheme } from 'styled-components';
 
 import { AccordionSize } from './Accordion';
 import { useAccordion } from './AccordionContext';

packages/strapi-design-system/src/Alert/Alert.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Information, CheckCircle, WarningCircle, Cross } from '@strapi/icons';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { handleBackgroundColor, handleBorderColor, handleIconColor } from './utils';
 import { Box, BoxComponent, BoxProps } from '../Box';

packages/strapi-design-system/src/Avatar/Avatar.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { avatarSize, previewSize } from './constants';
 import { Box, BoxComponent } from '../Box';

packages/strapi-design-system/src/Avatar/AvatarGroup.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { avatarSize } from './constants';
 import { Flex, FlexComponent } from '../Flex';

packages/strapi-design-system/src/Badge/Badge.tsx

@@ -1,4 +1,4 @@
-import styled, { DefaultTheme } from 'styled-components';
+import { styled, type DefaultTheme } from 'styled-components';
 
 import { Flex, FlexComponent, FlexProps } from '../Flex';
 import { Typography } from '../Typography';

packages/strapi-design-system/src/BaseButton/BaseButton.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { Flex, FlexComponent, FlexProps } from '../Flex';
 import { focus } from '../styles/buttons';

packages/strapi-design-system/src/BaseCheckbox/BaseCheckbox.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import checkmarkIconDisabled from './assets/checkmark-black.svg';
 import checkmarkIcon from './assets/checkmark.svg';

packages/strapi-design-system/src/BaseRadio/BaseRadio.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { RadioContext } from './context';
 import { RadioGroupSize } from './RadioGroup';

packages/strapi-design-system/src/Box/Box.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import styled, { CSSProperties, DefaultTheme } from 'styled-components';
+import { styled, type CSSProperties, type DefaultTheme } from 'styled-components';
 
 import handleResponsiveValues, { ResponsiveValue } from '../helpers/handleResponsiveValues';
 import { extractStyleFromTheme } from '../helpers/theme';

packages/strapi-design-system/src/Breadcrumbs/Breadcrumbs.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { Divider } from './Divider';
 import { Box } from '../Box';

packages/strapi-design-system/src/Breadcrumbs/CrumbLink.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { BaseLink, BaseLinkProps } from '../BaseLink';
 

packages/strapi-design-system/src/Breadcrumbs/CrumbSimpleMenu.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { SimpleMenu, SimpleMenuProps } from '../SimpleMenu';
 

packages/strapi-design-system/src/Button/Button.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { Loader } from '@strapi/icons';
-import styled, { keyframes } from 'styled-components';
+import { styled, keyframes } from 'styled-components';
 
 import { BUTTON_SIZES, Variant, ButtonSizes, DEFAULT } from './constants';
 import { getDisabledStyle, getHoverStyle, getActiveStyle, getVariantStyle } from './utils';

packages/strapi-design-system/src/Card/CardAction.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { Flex, FlexComponent } from '../Flex';
 

packages/strapi-design-system/src/Card/CardAsset.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { Flex } from '../Flex';
 

packages/strapi-design-system/src/Card/CardBadge.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { Badge, BadgeProps } from '../Badge';
 

packages/strapi-design-system/src/Card/CardContent.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { Box, BoxComponent, BoxProps } from '../Box';
 

packages/strapi-design-system/src/Card/CardHeader.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { Flex, FlexComponent, FlexProps } from '../Flex';
 

packages/strapi-design-system/src/CarouselInput/Carousel.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { ChevronRight, ChevronLeft } from '@strapi/icons';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { Box, BoxComponent, BoxProps } from '../Box';
 import { Flex, FlexComponent } from '../Flex';

packages/strapi-design-system/src/CarouselInput/CarouselImage.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { Box, BoxComponent, BoxProps } from '../Box';
 import { ellipsis } from '../styles/type';

packages/strapi-design-system/src/Checkbox/Checkbox.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { BaseCheckbox, BaseCheckboxProps, CheckboxElement } from '../BaseCheckbox';
 import { Box } from '../Box';

packages/strapi-design-system/src/Combobox/Combobox.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { CaretDown, Cross } from '@strapi/icons';
 import { Combobox as ComboboxPrimitive } from '@strapi/ui-primitives';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { Box, BoxComponent } from '../Box';
 import { FieldProps } from '../Field';

packages/strapi-design-system/src/DatePicker/DatePicker.tsx

@@ -22,7 +22,7 @@ import { Calendar, Cross } from '@strapi/icons';
 import { composeEventHandlers } from '@strapi/ui-primitives';
 import { createPortal } from 'react-dom';
 import { RemoveScroll } from 'react-remove-scroll';
-import styled, { DefaultTheme } from 'styled-components';
+import { styled, type DefaultTheme } from 'styled-components';
 
 import { Box, BoxComponent, BoxProps } from '../Box';
 import { useDesignSystem } from '../DesignSystemProvider';

packages/strapi-design-system/src/DateTimePicker/DateTimePicker.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { CalendarDateTime, parseAbsoluteToLocal, toCalendarDateTime, getLocalTimeZone } from '@internationalized/date';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { DatePicker as DatePickerInput, DatePickerProps, DatePickerElement } from '../DatePicker/DatePicker';
 import { useDesignSystem } from '../DesignSystemProvider';

packages/strapi-design-system/src/Dialog/Dialog.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { Box, BoxComponent, BoxProps } from '../Box';
 import { DismissibleLayer } from '../DismissibleLayer';

packages/strapi-design-system/src/Dialog/DialogBody.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { Box, BoxComponent } from '../Box';
 import { Flex } from '../Flex';

packages/strapi-design-system/src/Dialog/DialogFooter.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { Box, BoxComponent } from '../Box';
 import { Flex } from '../Flex';

packages/strapi-design-system/src/Divider/Divider.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { Box, BoxComponent, BoxProps } from '../Box';
 import { PropsToTransientProps } from '../types';

packages/strapi-design-system/src/EmptyStateLayout/EmptyStateLayout.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { Box, BoxComponent } from '../Box';
 import { Flex, FlexProps } from '../Flex';

packages/strapi-design-system/src/Field/FieldAction.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { Flex, FlexComponent, FlexProps } from '../Flex';
 import { VisuallyHidden } from '../VisuallyHidden';

packages/strapi-design-system/src/Field/FieldInput.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import styled, { css, DefaultTheme } from 'styled-components';
+import { styled, css, DefaultTheme } from 'styled-components';
 
 import { useField } from './FieldContext';
 import { Box } from '../Box';

packages/strapi-design-system/src/Field/FieldLabel.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { useField } from './FieldContext';
 import { Flex, FlexComponent } from '../Flex';

packages/strapi-design-system/src/Flex/Flex.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import styled, { CSSProperties } from 'styled-components';
+import { styled, type CSSProperties } from 'styled-components';
 
 import { Box, BoxComponent, BoxProps } from '../Box';
 import handleResponsiveValues, { ResponsiveValue } from '../helpers/handleResponsiveValues';

packages/strapi-design-system/src/Grid/Grid.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { Box, BoxComponent, BoxProps } from '../Box';
 import handleResponsiveValues, { ResponsiveValue } from '../helpers/handleResponsiveValues';

packages/strapi-design-system/src/Grid/GridItem.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { Box, BoxComponent, BoxProps } from '../Box';
 import { PropsToTransientProps } from '../types';

packages/strapi-design-system/src/IconButton/IconButton.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { BaseButton, BaseButtonProps } from '../BaseButton';
 import { Flex, FlexComponent } from '../Flex';

packages/strapi-design-system/src/JSONInput/JSONInput.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { jsonParseLinter, json } from '@codemirror/lang-json';
 import type { ViewUpdate } from '@codemirror/view';
 import { useCodeMirror, ReactCodeMirrorRef, ReactCodeMirrorProps } from '@uiw/react-codemirror';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { markField, addMarks, filterMarks, lineHighlightMark } from './utils/decorationExtension';
 import { FieldProps } from '../Field';

packages/strapi-design-system/src/Layout/GridLayout.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 export const GridLayout = styled.div`
   display: grid;

packages/strapi-design-system/src/Layout/Layout.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { Box, BoxComponent } from '../Box';
 

packages/strapi-design-system/src/Link/Link.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { ExternalLink } from '@strapi/icons';
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { BaseLink, BaseLinkProps } from '../BaseLink';
 import { focus } from '../styles/buttons';

packages/strapi-design-system/src/LinkButton/LinkButton.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { BaseLink, BaseLinkProps } from '../BaseLink';
 import { VARIANTS, BUTTON_SIZES } from '../Button/constants';

packages/strapi-design-system/src/Main/Main.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { Box, BoxComponent, BoxProps } from '../Box';
 

packages/strapi-design-system/src/Main/SkipToContent.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import { styled } from 'styled-components';
 
 import { Box, BoxComponent } from '../Box';