@apify/ui-library 0.71.1-featcolortokens-178953.55 → 0.71.1-featcolortokens-178953.58

package/CODEOWNERS

@@ -1,7 +0,0 @@
-# Code owners are automatically requested for review when someone opens a pull request that modifies code that they own.
-# See: https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/about-code-owners
-
-*                   		   		@jbartadev
-*                   		   		@HonzaKirchner
-/src/components/code           		@webrdaniel
-/src/components/readme_renderer     @webrdaniel

package/eslint.config.mjs

@@ -1,44 +0,0 @@
-import react from 'eslint-plugin-react';
-import reactHooks from 'eslint-plugin-react-hooks';
-import sonarjs from 'eslint-plugin-sonarjs';
-
-import apifyJestConfig from '@apify/eslint-config/jest.js';
-import apifyTypescriptConfig from '@apify/eslint-config/ts.js';
-
-// eslint-disable-next-line import/no-default-export
-export default [
-    { ignores: ['**/dist'] }, // Ignores need to happen first
-    ...apifyTypescriptConfig,
-    ...apifyJestConfig,
-
-    {
-        files: ['**/*.ts', '**/*.tsx'],
-        settings: {
-            react: {
-                version: 'detect',
-            },
-        },
-        ...react.configs.flat.recommended,
-    },
-    {
-        plugins: {
-            sonarjs,
-            'react-hooks': reactHooks,
-        },
-        languageOptions: {
-            sourceType: 'module',
-
-            parserOptions: {
-                projectService: true,
-                tsconfigRootDir: import.meta.dirname,
-            },
-        },
-        rules: {
-            'react/react-in-jsx-scope': 'off',
-            'no-void': 'off',
-            'react/display-name': 'off',
-            'react-hooks/exhaustive-deps': 'error',
-            ...reactHooks.configs.recommended.rules,
-        },
-    },
-];

package/src/codemods/generate_typograpy_tokens_files.mjs

@@ -1,137 +0,0 @@
-import { readFileSync, writeFileSync } from 'node:fs';
-
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { print, types } from 'recast';
-
-const { builders } = types;
-
-const code = readFileSync('./src/design_system/supernova_typography_tokens.json', 'utf-8');
-
-const fontFamilies = {
-    inter: `Inter, sans-serif`,
-    gtWalsheim: `'GT-Walsheim-Regular', sans-serif`,
-    sfPro: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'`,
-    ibmPlexMono: "'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace",
-};
-
-const transformTokenProperties = (token) => {
-    const {
-        fontWeight,
-        fontSize,
-        lineHeight,
-        fontFamily,
-    } = token.value;
-
-    // Convert font family name to font family value
-    let fontFamilyValue;
-    const fontFamilyNameParts = fontFamily.split(' '); // each word in font family name is a separate part
-
-    if (fontFamilyNameParts.length === 1) {
-        fontFamilyValue = fontFamilies[fontFamilyNameParts[0].toLowerCase()];
-    } else {
-        const fontFamilyIndex = fontFamilyNameParts.map((fontFamilyNamePart, i) => {
-            if (i === 0) return fontFamilyNamePart.toLowerCase();
-            return fontFamilyNamePart;
-        }).join('');
-
-        fontFamilyValue = fontFamilies[fontFamilyIndex];
-    }
-
-    return `font-size: ${Number(fontSize) / 10}rem; line-height: ${Number(lineHeight) / 10}rem; font-weight: ${fontWeight}; font-family: ${fontFamilyValue};`;
-};
-
-const transformTokenName = (tokenName) => {
-    const [token, variant] = tokenName.split('-');
-    return (variant ? `${token}${variant.charAt(0).toUpperCase() + variant.slice(1)}` : token);
-};
-
-const extractDeviceTokensDefinitions = (tokens) => {
-    return Object.keys(tokens).reduce((acc, tokenName) => {
-        const properTokenName = transformTokenName(tokenName);
-        acc[properTokenName] = transformTokenProperties(tokens[tokenName], fontFamilies);
-        return acc;
-    }, {});
-};
-
-const extractTokensDefinitions = (sharedTokens) => {
-    const sharedTokensDefinition = {
-        mobile: {},
-        tablet: {},
-        desktop: {},
-    };
-
-    Object.entries(sharedTokens).forEach(([tokenName, tokenValue]) => {
-        if ((tokenName === 'mobile' || tokenName === 'tablet') && typeof tokenValue !== 'string') {
-            sharedTokensDefinition[tokenName] = extractDeviceTokensDefinitions(tokenValue, fontFamilies);
-            return;
-        }
-
-        const properTokenName = transformTokenName(tokenName);
-        const transformedTokenProperties = transformTokenProperties(tokenValue, fontFamilies);
-        sharedTokensDefinition.desktop[properTokenName] = transformedTokenProperties;
-        sharedTokensDefinition.mobile[properTokenName] ||= transformedTokenProperties;
-        sharedTokensDefinition.tablet[properTokenName] ||= transformedTokenProperties;
-    });
-
-    return sharedTokensDefinition;
-};
-
-const globalTokens = JSON.parse(code).global;
-
-const sharedTokens = extractTokensDefinitions(globalTokens.shared);
-const marketingTokens = extractTokensDefinitions(globalTokens.marketing);
-const contentTokens = extractTokensDefinitions(globalTokens.content);
-
-const tokensForCodeGeneration = {
-    shared: sharedTokens,
-    marketing: marketingTokens,
-    content: contentTokens,
-};
-
-const createTokensCode = (tokens) => {
-    const variantsArray = [];
-    for (const [tokenVariant, tokenVariantItems] of Object.entries(tokens)) {
-        const devicesArray = [];
-
-        for (const [device, deviceTokens] of Object.entries(tokenVariantItems)) {
-            const deviceItemsArray = [];
-
-            for (const [tokenName, tokenValue] of Object.entries(deviceTokens)) {
-                deviceItemsArray.push(builders.property(
-                    'init',
-                    builders.identifier(tokenName),
-                    builders.literal(tokenValue),
-                ));
-            }
-            devicesArray.push(builders.property(
-                'init',
-                builders.identifier(device),
-                builders.objectExpression(deviceItemsArray),
-            ));
-        }
-
-        variantsArray.push(builders.property(
-            'init',
-            builders.identifier(tokenVariant),
-            builders.objectExpression(devicesArray),
-        ));
-    }
-
-    const exportDeclaration = builders.exportNamedDeclaration(
-        builders.variableDeclaration('const', [
-            builders.variableDeclarator(
-                builders.identifier('typographyTokens'),
-                builders.tsAsExpression(builders.objectExpression(variantsArray), builders.tsTypeReference(builders.identifier('const'))),
-            )]),
-        [],
-    );
-
-    // Add a comment to the export declaration
-    exportDeclaration.comments = [builders.commentBlock(' eslint-disable max-len ')];
-
-    return exportDeclaration;
-};
-
-const printedCode = print(builders.program([createTokensCode(tokensForCodeGeneration)])).code;
-
-writeFileSync('./src/design_system/typography_theme.ts', printedCode);

package/src/components/action_link.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { ArrowLeftIcon, ArrowRightIcon } from '@apify/ui-icons';
-
-import { theme } from '../design_system/theme.js';
-import { Box } from './box.js';
-import { Link, type LinkProps } from './link.js';
-import { Heading } from './text/index.js';
-
-const StyledGuidepost = styled(Box)<{ $isBackLink: boolean }>`
-    display: inline-flex;
-    align-items: center;
-    color: ${theme.color.neutral.text};
-
-    svg {
-        transition: transform 0.2s ease-in-out;
-    }
-
-    &:hover {
-        svg {
-            transform: translate(${({ $isBackLink }) => ($isBackLink ? -3 : 3)}px, 0);
-        }
-    }
-`;
-
-export const ActionLink: React.FC<LinkProps & { contentProps?: object }> = ({
-    children,
-    as = Link,
-    contentProps,
-    ...rest
-}) => {
-    return (
-        <StyledGuidepost
-            forwardedAs={as}
-            $isBackLink={false}
-            {...rest}
-        >
-            <Heading as='span' type='titleM' {...contentProps}>{children}</Heading>
-            <ArrowRightIcon size="16" />
-        </StyledGuidepost>
-    );
-};
-
-export const BackLink: React.FC<LinkProps> = ({
-    children,
-    as,
-    ...rest
-}) => {
-    return (
-        <StyledGuidepost
-            forwardedAs={as || Link}
-            $isBackLink={true}
-            {...rest}
-        >
-            <ArrowLeftIcon size="16" />
-            <Heading as='span' type='titleM'>{children}</Heading>
-        </StyledGuidepost>
-    );
-};

package/src/components/actor_template_card.tsx

@@ -1,116 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { theme } from '../design_system/theme.js';
-import { Badge } from './badge.js';
-import { TextMarketing } from './text/text_marketing.js';
-import { VerticalTile } from './tile/index.js';
-
-interface ActorTemplateCardProps {
-    id: string;
-    label: string;
-    description: string;
-    icons: React.ReactNode[];
-    useCases?: string[];
-}
-
-const WrapperClasses = {
-    TEMPLATE_CARD_IMAGES: 'TemplateCard-Images',
-    TEMPLATE_CARD_TEXT: 'TemplateCard-Text',
-    TEMPLATE_CARD_DESCRIPTION: 'TemplateCard-Description',
-    TEMPLATE_CARD_BADGES: 'TemplateCard-Badges',
-};
-
-const TemplateCardContentWrapper = styled.div`
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    align-self: stretch;
-    flex: 1 0 0;
-    gap: ${theme.space.space16};
-    color: ${theme.color.neutral.text};
-
-    .${WrapperClasses.TEMPLATE_CARD_IMAGES} {
-        display: flex;
-        align-items: flex-start;
-        gap: ${theme.space.space16};
-        flex-wrap: wrap;
-        img,
-        svg {
-            max-width: ${theme.space.space40};
-            max-height: ${theme.space.space40};
-        }
-    }
-
-    .${WrapperClasses.TEMPLATE_CARD_TEXT} {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        align-self: stretch;
-        gap: ${theme.space.space4};
-
-        .${WrapperClasses.TEMPLATE_CARD_DESCRIPTION} {
-            color: ${theme.color.neutral.textMuted};
-            overflow: hidden;
-            text-overflow: ellipsis;
-            display: -webkit-box;
-            -webkit-line-clamp: 3;
-            -webkit-box-orient: vertical;
-        }
-    }
-
-    .${WrapperClasses.TEMPLATE_CARD_BADGES} {
-        display: flex;
-        gap: ${theme.space.space4};
-    }
-`;
-
-export const ActorTemplateCard: React.FC<ActorTemplateCardProps> = ({
-    id,
-    label,
-    description,
-    icons,
-    useCases,
-}) => {
-    const templateCardContent = (
-        <TemplateCardContentWrapper>
-            <div className={WrapperClasses.TEMPLATE_CARD_IMAGES}>{icons}</div>
-            <div className={WrapperClasses.TEMPLATE_CARD_TEXT}>
-                <TextMarketing size="regular" weight="bold">
-                    {label}
-                </TextMarketing>
-                <TextMarketing
-                    size="small"
-                    className={WrapperClasses.TEMPLATE_CARD_DESCRIPTION}
-                >
-                    {description}
-                </TextMarketing>
-            </div>
-            <div className={WrapperClasses.TEMPLATE_CARD_BADGES}>
-                {useCases?.includes('STARTER') && (
-                    <Badge variant="success">Starter</Badge>
-                )}
-                {useCases?.includes('AI') && (
-                    <Badge
-                        variant="success"
-                        style={{
-                            color: '#6E00F4',
-                            fill: '#6E00F4',
-                            background: '#E4D4F7',
-                        }}
-                    >
-                        AI Agent
-                    </Badge>
-                )}
-            </div>
-        </TemplateCardContentWrapper>
-    );
-
-    return (
-        <VerticalTile
-            id={`actor-template-card-${id}`}
-            content={templateCardContent}
-            isClickable
-        />
-    );
-};

package/src/components/badge.tsx

@@ -1,148 +0,0 @@
-import React, { forwardRef } from 'react';
-import styled, { css, type FlattenSimpleInterpolation } from 'styled-components';
-
-import type { IconComponent, IconSize } from '@apify/ui-icons';
-
-import { theme } from '../design_system/theme.js';
-import type { WithTransientProps } from '../type_utils.js';
-import { Box, type MarginSpacingProps, type RegularBoxProps } from './box.js';
-import { Text } from './text/index.js';
-import type { SharedTextSize, SharedTextType } from './text/text_shared.js';
-
-export type BadgeSize = 'regular' | 'small' | 'extra_small';
-export const BADGE_SIZES: BadgeSize[] = ['regular', 'small'];
-
-const BADGE_ICON_SIZES = {
-    regular: '16',
-    small: '12',
-    extra_small: '12',
-} satisfies Record<BadgeSize, IconSize>;
-
-const BADGE_TEXT_SIZES = {
-    regular: 'regular',
-    small: 'small',
-    extra_small: 'small',
-} satisfies Record<BadgeSize, SharedTextSize>;
-
-export const BADGE_VARIANTS = ['neutral', 'neutral_muted', 'neutral_subtle', 'primary_black', 'primary_blue', 'success', 'warning', 'danger'] as const;
-type BadgeVariant = typeof BADGE_VARIANTS[number];
-
-type SharedBadgeProps = Omit<RegularBoxProps, 'as' | 'onClick'> & MarginSpacingProps;
-export type BadgeProps = SharedBadgeProps & {
-    as?: Exclude<React.ElementType, 'a' | 'button'>;
-    size?: BadgeSize;
-    type?: SharedTextType;
-    variant?: BadgeVariant;
-    LeadingIcon?: IconComponent;
-};
-
-const badgeSizeStyle = {
-    regular: css`
-        padding: ${theme.space.space4} ${theme.space.space8};
-        border-radius: ${theme.radius.radius6};
-    `,
-    small: css`
-        height: 2rem;
-        padding: ${theme.space.space2} ${theme.space.space6};
-        border-radius: ${theme.radius.radius4};
-    `,
-    extra_small: css`
-        height: ${theme.space.space16};
-        padding: ${theme.space.space2} ${theme.space.space4};
-        border-radius: ${theme.radius.radius4};
-    `,
-} satisfies Record<BadgeSize, FlattenSimpleInterpolation>;
-
-const badgeVariantStyle = {
-    neutral: css`
-        color: ${theme.color.neutral.text};
-        fill: ${theme.color.neutral.text};
-        background: ${theme.color.neutral.background};
-        box-shadow: inset 0 0 0 1px ${theme.color.neutral.border};
-    `,
-    neutral_muted: css`
-        color: ${theme.color.neutral.text};
-        fill: ${theme.color.neutral.text};
-        background: ${theme.color.neutral.chipBackground};
-    `,
-    neutral_subtle: css`
-        color: ${theme.color.neutral.textSubtle};
-        fill: ${theme.color.neutral.textSubtle};
-        background: ${theme.color.neutral.backgroundSubtle};
-    `,
-    primary_black: css`
-        color: ${theme.color.primaryBlack.chipText};
-        fill: ${theme.color.primaryBlack.chipText};
-        background: ${theme.color.primaryBlack.background};
-    `,
-    primary_blue: css`
-        color: ${theme.color.primary.chipText};
-        fill: ${theme.color.primaryBlack.chipText};
-        background: ${theme.color.primary.background};
-    `,
-    success: css`
-        color: ${theme.color.success.chipText};
-        fill: ${theme.color.success.chipText};
-        background: ${theme.color.success.background};
-    `,
-    warning: css`
-        color: ${theme.color.warning.chipText};
-        fill: ${theme.color.warning.chipText};
-        background: ${theme.color.warning.background};
-    `,
-    danger: css`
-        color: ${theme.color.danger.chipText};
-        fill: ${theme.color.danger.chipText};
-        background: ${theme.color.danger.background};
-    `,
-} satisfies Record<BadgeVariant, FlattenSimpleInterpolation>;
-
-type StyledBadgeProps = WithTransientProps<
-    Required<Pick<BadgeProps, 'size' | 'variant'>>
->;
-
-const StyledBadge = styled(Box)<StyledBadgeProps>`
-    ${({ $size }) => badgeSizeStyle[$size]};
-    ${({ $variant }) => badgeVariantStyle[$variant]};
-
-  /* Static styles */
-    width: fit-content;
-    border: none;
-    outline: none;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    white-space: nowrap;
-    gap: ${theme.space.space4};
-`;
-
-/**
- * Component for displaying non-interactive chip descendant.
- */
-export const Badge = forwardRef(
-    ({
-        size = 'small',
-        type = 'body',
-        variant = 'neutral',
-        LeadingIcon,
-        children,
-        ...props
-    }: BadgeProps,
-    ref,
-    ) => {
-        return (
-            <StyledBadge
-                ref={ref}
-                $size={size}
-                $variant={variant}
-                {...props}
-            >
-                {LeadingIcon && <LeadingIcon size={BADGE_ICON_SIZES[size]} />}
-                {children && (<Text size={BADGE_TEXT_SIZES[size]} type={type} weight="medium">{children}</Text>)}
-            </StyledBadge>
-        );
-    },
-);
-
-Badge.displayName = 'Badge';

package/src/components/banner.tsx

@@ -1,94 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-
-import { theme } from '../design_system/theme.js';
-
-const BANNER_GRADIENT_BACKGROUND_SVG = `<svg width="1200" height="148" viewBox="0 0 1200 148" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_2285_34756)">
-    <g filter="url(#filter0_f_2285_34756)">
-    <path d="M-39.7702 191.085C-55.0622 193.205 -68.8864 201.311 -78.2029 213.621C-87.5194 225.932 -91.5654 241.438 -89.4512 256.731L-55.0077 502.652L89.8852 173L-39.7702 191.085Z" fill="url(#paint0_linear_2285_34756)"/>
-    </g>
-    <g filter="url(#filter1_f_2285_34756)">
-    <path d="M1267.53 398.062L1253.99 209.002C1252.85 193.626 1245.67 179.327 1234.01 169.234C1222.36 159.14 1207.18 154.073 1191.8 155.14C1190.5 155.19 1189.2 155.331 1187.92 155.564L1132 163.289L1254.84 438.685C1264.05 427.236 1268.59 412.721 1267.53 398.062Z" fill="url(#paint1_linear_2285_34756)"/>
-    </g>
-    <g filter="url(#filter2_f_2285_34756)">
-    <path d="M561 29.7691C570.917 30.4746 580.956 29.5571 590.142 27.1057L801.075 -28.7862L700.682 -170L561 29.7691Z" fill="url(#paint2_linear_2285_34756)"/>
-    </g>
-    </g>
-    <defs>
-    <filter id="filter0_f_2285_34756" x="-170" y="93" width="339.885" height="489.652" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-    <feGaussianBlur stdDeviation="40" result="effect1_foregroundBlur_2285_34756"/>
-    </filter>
-    <filter id="filter1_f_2285_34756" x="1052" y="75" width="295.683" height="443.686" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-    <feGaussianBlur stdDeviation="40" result="effect1_foregroundBlur_2285_34756"/>
-    </filter>
-    <filter id="filter2_f_2285_34756" x="481" y="-250" width="400.074" height="360" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-    <feGaussianBlur stdDeviation="40" result="effect1_foregroundBlur_2285_34756"/>
-    </filter>
-    <linearGradient id="paint0_linear_2285_34756" x1="-0.0574112" y1="173" x2="-0.0574112" y2="502.652" gradientUnits="userSpaceOnUse">
-    <stop stop-color="#00FF85"/>
-    <stop offset="1" stop-color="#00FF47" stop-opacity="0"/>
-    </linearGradient>
-    <linearGradient id="paint1_linear_2285_34756" x1="1146.02" y1="174.549" x2="1333.1" y2="293.915" gradientUnits="userSpaceOnUse">
-    <stop stop-color="#00FFF0"/>
-    <stop offset="1" stop-color="#1672EB"/>
-    </linearGradient>
-    <linearGradient id="paint2_linear_2285_34756" x1="681.037" y1="-170" x2="681.037" y2="30" gradientUnits="userSpaceOnUse">
-    <stop stop-color="#F5B315"/>
-    <stop offset="1" stop-color="#FF2CC4"/>
-    </linearGradient>
-    <clipPath id="clip0_2285_34756">
-    <rect width="1200" height="1791.08" rx="16" fill="white"/>
-    </clipPath>
-    </defs>
-</svg>
-`;
-
-interface BannerProps {
-    background?: string,
-    useGradientBackground?: boolean,
-    width?: string,
-    className?: string,
-    children: React.ReactNode,
-}
-
-const getBannerBackground = (background?: string, useGradientBackground?: boolean) => {
-    return css`
-            background-color: ${background || theme.color.neutral.backgroundSubtle};
-            ${useGradientBackground && `
-            background-image: url("data:image/svg+xml,${encodeURIComponent(BANNER_GRADIENT_BACKGROUND_SVG)}");
-            background-position: center;
-            background-repeat: no-repeat;
-            background-size: cover;
-            `}
-        `;
-};
-
-const StyledBanner = styled.div<{ $background?: string, $useGradientBackground?: boolean, width?: string }>`
-    width: ${(props) => props.width || '100%'};
-    padding: ${theme.space.space40} ${theme.space.space80};
-    border-radius: ${theme.radius.radius16};
-
-    ${({ $background, $useGradientBackground }) => getBannerBackground($background, $useGradientBackground)};
-`;
-
-export const Banner: React.FC<BannerProps> = ({
-    useGradientBackground = true,
-    background,
-    children,
-    ...otherProps
-}) => (
-    <StyledBanner
-        $background={background}
-        $useGradientBackground={useGradientBackground}
-        {...otherProps}
-    >
-        {children}
-    </StyledBanner>
-);

package/src/components/blog_article.tsx

@@ -1,85 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { ArrowRightIcon } from '@apify/ui-icons';
-
-import { theme } from '../design_system/theme.js';
-
-const classNames = {
-    IMAGE_WRAPPER: 'ImageWrapper',
-    TEXT: 'Text',
-    READ_POST: 'ReadPost',
-};
-
-const BlogArticleWrapper = styled.div`
-    display: flex;
-    flex-direction: column;
-
-    &:hover {
-        .${classNames.READ_POST} {
-                color: ${theme.color.primary.action};
-        }
-    }
-
-    .${classNames.IMAGE_WRAPPER} {
-        margin-bottom: ${theme.space.space16};
-        border-radius: ${theme.radius.radius12};
-        border: 1px solid ${theme.color.neutral.backgroundSubtle};
-        aspect-ratio: 16/9;
-    }
-
-    .${classNames.TEXT} {
-        padding-bottom: ${theme.space.space16};
-        color: ${theme.color.neutral.text};
-        ${theme.typography.shared.mobile.titleL}
-
-        @media (min-width: ${theme.layout.tablet}) {
-            ${theme.typography.shared.tablet.titleL}
-        }
-
-        @media (min-width: ${theme.layout.desktop}) {
-            ${theme.typography.shared.desktop.titleL}
-        }
-    }
-
-    .${classNames.READ_POST} {
-        display: flex;
-        align-items: center;
-        gap: ${theme.space.space4};
-        color: ${theme.color.neutral.textMuted};
-        ${theme.typography.shared.mobile.titleM}
-
-        @media (min-width: ${theme.layout.tablet}) {
-            ${theme.typography.shared.tablet.titleM}
-        }
-
-        @media (min-width: ${theme.layout.desktop}) {
-            ${theme.typography.shared.desktop.titleM}
-        }
-
-
-        svg {
-            transition: margin-right .5s;
-        }
-
-        &:hover svg {
-            margin-right: ${theme.space.space4};
-        }
-    }
-`;
-
-interface BlogArticleProps {
-    imageNode: React.ReactNode;
-    title: string;
-    ctaTitle?: string;
-}
-
-export function BlogArticle({ imageNode, title, ctaTitle = 'Read more' }: BlogArticleProps) {
-    return (
-        <BlogArticleWrapper>
-            <div className={classNames.IMAGE_WRAPPER}>{imageNode}</div>
-            <div className={classNames.TEXT}>{title}</div>
-            <div className={classNames.READ_POST}>{ctaTitle}<ArrowRightIcon size="16" title="" titleId="" /></div>
-        </BlogArticleWrapper>
-    );
-}