@apify/ui-library 1.141.0 → 1.141.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.141.0",
+    "version": "1.141.2",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -27,7 +27,7 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^1.39.0",
+        "@apify/ui-icons": "^1.39.1",
         "@floating-ui/react": "^0.27.19",
         "@floating-ui/react-dom": "^2.1.8",
         "@radix-ui/react-checkbox": "^1.3.3",
@@ -73,5 +73,5 @@
         "src",
         "style"
     ],
-    "gitHead": "0d1fdfbe1cf60fe2c2eff457d75e8bc6fd8843c0"
+    "gitHead": "bf6ef3f0da8a28fe6a467abf93fcc1489e1689eb"
 }

package/src/components/{action_link.tsx → action_link/action_link.tsx}

@@ -5,10 +5,10 @@ import { ArrowLeftIcon, ArrowRightIcon } from '@apify/ui-icons';
 
 import type { RequiredBy } from '@apify-packages/types';
 
-import { theme } from '../design_system/theme.js';
-import { Box, type BoxProps } from './box.js';
-import { Link, type LinkProps, StyledAsLink } from './link.js';
-import { Heading } from './text/index.js';
+import { theme } from '../../design_system/theme.js';
+import { Box, type BoxProps } from '../box';
+import { Link, type LinkProps, StyledAsLink } from '../link';
+import { Heading } from '../text';
 
 const StyledGuidepost = styled(Box)<{ $isBackLink: boolean }>`
     display: inline-flex;

package/src/components/action_link/index.ts

@@ -0,0 +1 @@
+export * from './action_link.js';

package/src/components/{actor_template_card.tsx → actor_template_card/actor_template_card.tsx}

@@ -1,10 +1,10 @@
 import type 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';
+import { theme } from '../../design_system/theme.js';
+import { Badge } from '../badge';
+import { TextMarketing } from '../text';
+import { VerticalTile } from '../tile';
 
 interface ActorTemplateCardProps {
     id: string;

package/src/components/actor_template_card/index.ts

@@ -0,0 +1 @@
+export * from './actor_template_card.js';

package/src/components/{badge.stories.jsx → badge/badge.stories.jsx}

@@ -5,8 +5,8 @@ import styled from 'styled-components';
 
 import { PeopleIcon } from '@apify/ui-icons';
 
+import { SHARED_TEXT_TYPES } from '..';
 import { Badge, BADGE_SIZES, BADGE_VARIANTS } from './badge.tsx';
-import { SHARED_TEXT_TYPES } from './index.ts';
 
 export default {
     title: 'UI-Library/Badge',

package/src/components/{badge.tsx → badge/badge.tsx}

@@ -4,12 +4,12 @@ import styled, { css } 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 type { FlattenSimpleInterpolation } from '../utils/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';
+import { theme } from '../../design_system/theme.js';
+import type { WithTransientProps } from '../../type_utils';
+import type { FlattenSimpleInterpolation } from '../../utils/type_utils';
+import { Box, type MarginSpacingProps, type RegularBoxProps } from '../box';
+import { Text } from '../text';
+import type { SharedTextSize, SharedTextType } from '../text';
 
 export type BadgeSize = 'large' | 'regular' | 'small' | 'extra_small';
 export const BADGE_SIZES: BadgeSize[] = ['large', 'regular', 'small', 'extra_small'];

package/src/components/badge/index.ts

@@ -0,0 +1 @@
+export * from './badge.js';

package/src/components/{banner.tsx → banner/banner.tsx}

@@ -1,7 +1,7 @@
 import type React from 'react';
 import styled, { css } from 'styled-components';
 
-import { theme } from '../design_system/theme.js';
+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)">

package/src/components/banner/index.ts

@@ -0,0 +1 @@
+export * from './banner.js';

package/src/components/{blog_article.tsx → blog_article/blog_article.tsx}

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { ArrowRightIcon } from '@apify/ui-icons';
 
-import { theme } from '../design_system/theme.js';
+import { theme } from '../../design_system/theme.js';
 
 const classNames = {
     IMAGE_WRAPPER: 'ImageWrapper',

package/src/components/blog_article/index.ts

@@ -0,0 +1 @@
+export * from './blog_article.js';

package/src/components/box/box.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Box } from './box.js';
+
+const meta: Meta<typeof Box> = {
+    title: 'UI-Library/Box',
+    component: Box,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component:
+                    'Foundational primitive for layout and spacing. Provides margin/padding props (`m`, `mt`, `p`, `px`, …) via design tokens, plus a polymorphic `as` prop. Used as the base for most other components.',
+            },
+        },
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Box>;
+
+const Sample = ({ label, background = '#e3f2fd' }: { label: string; background?: string }) => (
+    <div style={{ background, padding: '0.5rem 1rem', borderRadius: '0.4rem', display: 'inline-block' }}>{label}</div>
+);
+
+/** Default Box renders as a div with no styling applied. */
+export const Default: Story = {
+    render: () => (
+        <Box>
+            <Sample label="Default Box (no spacing)" />
+        </Box>
+    ),
+};
+
+/** Margin props: `m`, `mt`, `mb`, `ml`, `mr`, `mx`, `my`. Values come from the spacing scale. */
+export const MarginSpacing: Story = {
+    render: () => (
+        <div style={{ border: '1px dashed #aaa', padding: '1rem' }}>
+            <Box mt="space8" mb="space24">
+                <Sample label="mt='space8' mb='space24'" />
+            </Box>
+            <Box mx="space32">
+                <Sample label="mx='space32' (horizontal margin)" background="#fff3e0" />
+            </Box>
+            <Box m="space16">
+                <Sample label="m='space16' (uniform)" background="#f3e5f5" />
+            </Box>
+        </div>
+    ),
+};
+
+/** Padding props: `p`, `pt`, `pb`, `pl`, `pr`, `px`, `py`. */
+export const PaddingSpacing: Story = {
+    render: () => (
+        <Box p="space16" style={{ background: '#e8f5e9', display: 'inline-block', borderRadius: '0.4rem' }}>
+            <Sample label="Box with p='space16'" background="#fff" />
+        </Box>
+    ),
+};
+
+/** `as` prop renders the Box as a different HTML element while keeping all spacing props. */
+export const PolymorphicAs: Story = {
+    render: () => (
+        <>
+            <Box as="section" mb="space16" style={{ background: '#e1f5fe', padding: '1rem' }}>
+                <Sample label="Box as='section'" background="#fff" />
+            </Box>
+            <Box as="aside" style={{ background: '#fff3e0', padding: '1rem' }}>
+                <Sample label="Box as='aside'" background="#fff" />
+            </Box>
+        </>
+    ),
+};
+
+/** Click handler. */
+export const WithOnClick: Story = {
+    render: () => (
+        <Box
+            onClick={() => alert('Box clicked!')}
+            p="space12"
+            style={{ background: '#fce4ec', cursor: 'pointer', borderRadius: '0.4rem', display: 'inline-block' }}
+        >
+            Click me
+        </Box>
+    ),
+};

package/src/components/{box.tsx → box/box.tsx}

@@ -2,9 +2,9 @@ import type React from 'react';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
-import { theme } from '../design_system/theme.js';
-import type { Size } from '../design_system/tokens/index.js';
-import type { WithTransientProps } from '../type_utils.js';
+import { theme } from '../../design_system/theme.js';
+import type { Size } from '../../design_system/tokens';
+import type { WithTransientProps } from '../../type_utils';
 
 type ExtendedSize = Size | 'none' | 'auto';
 

package/src/components/box/index.ts

@@ -0,0 +1 @@
+export * from './box.js';

package/src/components/breadcrumb/breadcrumb.tsx

@@ -3,9 +3,9 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
-import { Box } from '../box.js';
-import { Link } from '../link.js';
-import { Text } from '../text/index.js';
+import { Box } from '../box';
+import { Link } from '../link';
+import { Text } from '../text';
 
 export const breadcrumbClassNames = {
     WRAPPER: 'Breadcrumbs__Wrapper',

package/src/components/browser_window/browser_window.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from 'react';
 import styled from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
-import { Badge } from '../badge.js';
+import { Badge } from '../badge';
 
 const classNames = {
     ROOT: 'browser-window',

package/src/components/{button.stories.tsx → button/button.stories.tsx}

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 
 import { CrossIcon } from '@apify/ui-icons';
 
-import { theme } from '../design_system/theme.js';
+import { theme } from '../../design_system/theme.js';
 import { Button, type ButtonProps } from './button.js';
 
 export default {

package/src/components/{button.tsx → button/button.tsx}

@@ -5,11 +5,11 @@ import styled, { css } from 'styled-components';
 
 import { ExternalLinkIcon, type IconSize } from '@apify/ui-icons';
 
-import { theme } from '../design_system/theme.js';
-import { type WithRequired, type WithTransientProps } from '../type_utils.js';
-import { useSharedUiDependencies } from '../ui_dependency_provider.js';
-import { Box, type MarginSpacingProps, type RegularBoxProps } from './box.js';
-import { isUrlExternal, Link, type LinkProps } from './link.js';
+import { theme } from '../../design_system/theme.js';
+import { type WithRequired, type WithTransientProps } from '../../type_utils.js';
+import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
+import { Box, type MarginSpacingProps, type RegularBoxProps } from '../box';
+import { isUrlExternal, Link, type LinkProps } from '../link';
 
 export type ButtonSize = 'extraLarge' | 'large' | 'medium' | 'small' | 'extraSmall';
 type ButtonColor = 'default' | 'success' | 'danger' | 'primaryBlack';

package/src/components/button/index.ts

@@ -0,0 +1 @@
+export * from './button.js';

package/src/components/{to_consolidate → card}/card.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Button } from '../button.js';
+import { Button } from '../button';
 import { Card, type CardProps } from './card.js';
 
 export default {

package/src/components/{to_consolidate → card}/card.tsx

@@ -4,10 +4,10 @@ import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
-import type { WithTransientProps } from '../../type_utils.js';
-import type { BoxProps } from '../box.js';
-import { Box } from '../box.js';
-import { Text } from '../text/index.js';
+import type { WithTransientProps } from '../../type_utils';
+import type { BoxProps } from '../box';
+import { Box } from '../box';
+import { Text } from '../text';
 
 export const cardClassNames = {
     WRAPPER: 'Card',

package/src/components/card/index.ts

@@ -0,0 +1 @@
+export * from './card.js';

package/src/components/{card_container.stories.tsx → card_container/card_container.stories.tsx}

@@ -4,8 +4,8 @@ import styled from 'styled-components';
 
 import { DragIndicatorIcon } from '@apify/ui-icons';
 
+import { IconButton } from '../icon_button';
 import { CardContainer, cardContainerClassNames, type CardContainerProps } from './card_container.js';
-import { IconButton } from './icon_button.js';
 
 export default {
     title: 'UI-Library/Cards/CardContainer',

package/src/components/{card_container.tsx → card_container/card_container.tsx}

@@ -3,9 +3,9 @@ import styled from 'styled-components';
 
 import type { ValueOf } from '@apify-packages/types';
 
-import { theme } from '../design_system/theme.js';
-import type { Size } from '../design_system/tokens/index.js';
-import { Box, type BoxProps } from './box.js';
+import { theme } from '../../design_system/theme.js';
+import type { Size } from '../../design_system/tokens';
+import { Box, type BoxProps } from '../box';
 
 export const cardContainerClassNames = {
     CONTENT: 'CardContainer-Content',

package/src/components/card_container/index.ts

@@ -0,0 +1 @@
+export * from './card_container.js';

package/src/components/{chip.tsx → chip/chip.tsx}

@@ -6,8 +6,8 @@ import styled, { css } from 'styled-components';
 
 import type { ValueOf } from '@apify-packages/types';
 
-import { theme } from '../design_system/theme.js';
-import type { RegularBoxProps } from './box.js';
+import { theme } from '../../design_system/theme.js';
+import type { RegularBoxProps } from '../box';
 
 export const CHIP_SIZES = {
     EXTRA_SMALL: 'XS',

package/src/components/chip/index.ts

@@ -0,0 +1 @@
+export * from './chip.js';

package/src/components/code/action_button.tsx

@@ -5,8 +5,8 @@ import { CheckIcon, CopyIcon } from '@apify/ui-icons';
 
 import { theme } from '../../design_system/theme.js';
 import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
-import { useCopyToClipboard } from '../../utils/index.js';
-import { Text } from '../text/index.js';
+import { useCopyToClipboard } from '../../utils';
+import { Text } from '../text';
 
 interface StyledButtonProps {
     $successStyle?: boolean;

package/src/components/code/code_block/code_block.styled.tsx

@@ -1,8 +1,8 @@
 import styled, { css } from 'styled-components';
 
 import { theme } from '../../../design_system/theme.js';
-import { Box } from '../../box.js';
-import type { SharedTextProps, SharedTextSize } from '../../text/text_shared.js';
+import { Box } from '../../box';
+import type { SharedTextProps, SharedTextSize } from '../../text/text_shared';
 
 export type SyntaxHighlighterBaseStylesWrapperProps = SharedTextProps & {
     $fullWidth?: boolean;

package/src/components/code/code_block/code_block.tsx

@@ -2,11 +2,11 @@ import clsx from 'clsx';
 import type React from 'react';
 import { useMemo, useRef, useState } from 'react';
 
-import type { RegularBoxProps } from '../../box.js';
-import { ColorWheelGradient } from '../../color_wheel_gradient.js';
-import { Link } from '../../link.js';
-import { Text } from '../../text/index.js';
-import type { SharedTextSize } from '../../text/text_shared.js';
+import type { RegularBoxProps } from '../../box';
+import { ColorWheelGradient } from '../../color_wheel_gradient';
+import { Link } from '../../link';
+import { Text } from '../../text';
+import type { SharedTextSize } from '../../text/text_shared';
 import { ActionButton, CopyButton } from '../action_button.js';
 import { PrismSyntaxHighlighter } from '../prism_highlighter.js';
 import { CodeBlockWrapper } from './code_block.styled.js';

package/src/components/code/code_block/code_block_with_tabs.tsx

@@ -7,8 +7,8 @@ import { CodeIcon, HttpIcon, type IconComponent, McpIcon } from '@apify/ui-icons
 
 import { theme } from '../../../design_system/theme.js';
 import { useSharedUiDependencies } from '../../../ui_dependency_provider.js';
-import { Box, type MarginSpacingProps, type RegularBoxProps } from '../../box.js';
-import { Link, type RegularLinkProps } from '../../link.js';
+import { Box, type MarginSpacingProps, type RegularBoxProps } from '../../box';
+import { Link, type RegularLinkProps } from '../../link';
 import { HeadingShared } from '../../text/heading_shared.js';
 import { CodeBlock, type CodeBlockProps } from './code_block.js';
 

package/src/components/code/inline_code/inline_code.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import type { InlineCodeProps } from './inline_code.js';
+import type { InlineCodeProps } from './inline_code';
 import { InlineCode } from './inline_code.js';
 
 /**

package/src/components/code/inline_code/inline_code.tsx

@@ -5,9 +5,9 @@ import { CheckIcon, CopyIcon } from '@apify/ui-icons';
 
 import { theme } from '../../../design_system/theme.js';
 import { useCopyToClipboard } from '../../../utils/copy_to_clipboard.js';
-import type { RegularBoxProps } from '../../box.js';
-import { Text } from '../../text/index.js';
-import type { SharedTextSize } from '../../text/text_shared.js';
+import type { RegularBoxProps } from '../../box';
+import { Text } from '../../text';
+import type { SharedTextSize } from '../../text/text_shared';
 
 // TODO: We should not need to export these once we consolidate Markdown
 export const inlineCodeStyles = css`

package/src/components/code/one_line_code/one_line_code.tsx

@@ -6,11 +6,11 @@ import { EyeIcon, EyeOffIcon } from '@apify/ui-icons';
 import type { HttpMethod } from '@apify-packages/types';
 
 import { theme } from '../../../design_system/theme.js';
-import type { BoxProps } from '../../box.js';
-import { Text } from '../../text/index.js';
-import type { SharedTextSize } from '../../text/text_shared.js';
+import type { BoxProps } from '../../box';
+import { Text } from '../../text';
+import type { SharedTextSize } from '../../text/text_shared';
 import { ActionButton, CopyButton } from '../action_button.js';
-import type { SyntaxHighlighterBaseStylesWrapperProps } from '../code_block/code_block.styled.js';
+import type { SyntaxHighlighterBaseStylesWrapperProps } from '../code_block/code_block.styled';
 import { SyntaxHighlighterBaseStylesWrapper } from '../code_block/code_block.styled.js';
 import { getBashLinePrefixes } from '../code_block/utils.js';
 import { PrismSyntaxHighlighter } from '../prism_highlighter.js';

package/src/components/code/prism_highlighter.tsx

@@ -8,8 +8,8 @@ import styled, { css } from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
 import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
-import { Text } from '../text/index.js';
-import type { SharedTextSize } from '../text/text_shared.js';
+import { Text } from '../text';
+import type { SharedTextSize } from '../text';
 import { oneLightTheme } from './one_light_theme.js';
 
 (typeof global !== 'undefined' ? global : window).Prism = Prism;

package/src/components/collapsible_card/collapsible_card.tsx

@@ -6,8 +6,8 @@ import styled, { css } from 'styled-components';
 import { ChevronDownIcon } from '@apify/ui-icons';
 
 import { theme } from '../../design_system/theme.js';
-import type { WithTransientProps } from '../../type_utils.js';
-import { Box } from '../box.js';
+import type { WithTransientProps } from '../../type_utils';
+import { Box } from '../box';
 
 interface TransientWrapperProps {
     hideOuterBorder?: boolean;

package/src/components/color_wheel_gradient/index.ts

@@ -0,0 +1 @@
+export * from './color_wheel_gradient.js';

package/src/components/floating/menu.tsx

@@ -13,8 +13,8 @@ import clsx from 'clsx';
 import type React from 'react';
 import { useCallback, useMemo, useRef, useState } from 'react';
 
-import { Box, type BoxProps } from '../box.js';
-import { Text } from '../text/index.js';
+import { Box, type BoxProps } from '../box';
+import { Text } from '../text';
 import { useFloatingMenu } from './menu_common.js';
 import { DropdownMenuBaseComponent, ListMenuComponent, ListMenuItemComponent } from './menu_components.js';
 

package/src/components/floating/menu_components.tsx

@@ -6,9 +6,9 @@ import styled, { css } from 'styled-components';
 import { ChevronDownIcon, CrossIcon } from '@apify/ui-icons';
 
 import { theme } from '../../design_system/theme.js';
-import { Badge } from '../badge.js';
-import type { BoxProps } from '../box.js';
-import { Box } from '../box.js';
+import { Badge } from '../badge';
+import type { BoxProps } from '../box';
+import { Box } from '../box';
 
 export type FloatingContext = Pick<UseFloatingReturn<ReferenceType>, 'context'>['context'];
 

package/src/components/floating/tooltip_content.tsx

@@ -1,8 +1,8 @@
 import styled, { css } from 'styled-components';
 
 import { theme } from '../../design_system/theme.js';
-import { Shortcut } from '../shortcut.js';
-import type { TooltipProps, TooltipSize, TooltipTextAlign } from './tooltip.js';
+import { Shortcut } from '../shortcut';
+import type { TooltipProps, TooltipSize, TooltipTextAlign } from './tooltip';
 import { TOOLTIP_SIZES, TOOLTIP_TEXT_ALIGNS } from './tooltip.js';
 
 type ContentProps = Pick<TooltipProps, 'content' | 'shortcuts' | 'imageUrl' | 'subtleText' | 'size' | 'textAlign'>;

package/src/components/{icon_button.tsx → icon_button/icon_button.tsx}

@@ -5,18 +5,18 @@ import type { IconComponent, IconSize } from '@apify/ui-icons';
 
 import type { ValueOf } from '@apify-packages/types';
 
-import { theme } from '../design_system/theme.js';
-import type { RegularBoxProps } from './box.js';
+import { theme } from '../../design_system/theme.js';
+import type { RegularBoxProps } from '../box';
 import {
     Button,
     BUTTON_SIZE_VARIANTS_CSS,
     type ButtonSize,
     type RegularButtonProps,
     type TransientButtonProps,
-} from './button.js';
-import { Tooltip } from './floating/tooltip.js';
-import { Link, type RegularLinkProps } from './link.js';
-import { InlineSpinner, spinnerClassNames } from './spinner.js';
+} from '../button';
+import { Tooltip } from '../floating';
+import { Link, type RegularLinkProps } from '../link';
+import { InlineSpinner, spinnerClassNames } from '../spinner';
 
 export const ICON_BUTTON_VARIANTS = {
     DEFAULT: 'DEFAULT',

package/src/components/icon_button/index.ts

@@ -0,0 +1 @@
+export * from './icon_button.js';

package/src/components/image/image.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Image } from './image.js';
+
+const meta: Meta<typeof Image> = {
+    title: 'UI-Library/Image',
+    component: Image,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component:
+                    "Wrapper around `<img>` that uses the host app's `InternalImage` (e.g. for image proxy / CDN). Also accepts all spacing props from `Box`.",
+            },
+        },
+    },
+    argTypes: {
+        src: { control: 'text' },
+        alt: { control: 'text' },
+        width: { control: 'number' },
+        height: { control: 'number' },
+        loading: {
+            control: 'select',
+            options: ['eager', 'lazy'],
+        },
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Image>;
+
+const PLACEHOLDER_SRC = 'https://console.apify.com/img/logos_apify/logo_apify_full_dark_text.svg';
+
+/** Basic image with src and alt. */
+export const Default: Story = {
+    args: {
+        src: PLACEHOLDER_SRC,
+        alt: 'Apify logo',
+        width: 160,
+    },
+};
+
+/** With explicit dimensions. */
+export const WithDimensions: Story = {
+    args: {
+        src: PLACEHOLDER_SRC,
+        alt: 'Apify logo',
+        width: 240,
+        height: 64,
+    },
+};
+
+/** Lazy loading — the browser defers the request until the image is near the viewport. */
+export const LazyLoading: Story = {
+    args: {
+        src: PLACEHOLDER_SRC,
+        alt: 'Apify logo (lazy)',
+        width: 200,
+        loading: 'lazy',
+    },
+};
+
+/** Box spacing props work on Image too. */
+export const WithSpacing: Story = {
+    args: {
+        src: PLACEHOLDER_SRC,
+        alt: 'Apify logo',
+        width: 200,
+        m: 'space24',
+    },
+    render: (args) => (
+        <div style={{ background: '#f5f5f5', display: 'inline-block', borderRadius: '0.4rem' }}>
+            <Image {...args} />
+        </div>
+    ),
+};