@apify/ui-library 1.110.1-chorerewritepublishworkflowo-80feae.30 → 1.112.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.110.1-chorerewritepublishworkflowo-80feae.30+4eb8cd8353c",
+    "version": "1.112.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -26,7 +26,7 @@
         "It's not nice, but helps us to get around the problem of multiple react instances."
     ],
     "dependencies": {
-        "@apify/ui-icons": "^1.24.1-chorerewritepublishworkflowo-80feae.30+4eb8cd8353c",
+        "@apify/ui-icons": "^1.24.0",
         "@floating-ui/react": "^0.26.2",
         "@react-hook/resize-observer": "^2.0.2",
         "clsx": "^2.0.0",
@@ -64,5 +64,5 @@
         "src",
         "style"
     ],
-    "gitHead": "4eb8cd8353c3c52c86c5317cb6629885dff9e690"
+    "gitHead": "bb74d410b278d8bd1d8937774292c51324e30c49"
 }

package/src/components/action_link.tsx

@@ -1,17 +1,20 @@
-import type React from 'react';
+import React, { type FC } from 'react';
 import styled from 'styled-components';
 
 import { ArrowLeftIcon, ArrowRightIcon } from '@apify/ui-icons';
 
+import type { RequiredBy } from '@apify-packages/types';
+
 import { theme } from '../design_system/theme.js';
-import { Box } from './box.js';
-import { Link, type LinkProps } from './link.js';
+import { Box, type BoxProps } from './box.js';
+import { Link, type LinkProps, StyledAsLink } 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};
+    cursor: pointer;
 
     svg {
         transition: transform 0.2s ease-in-out;
@@ -24,7 +27,25 @@ const StyledGuidepost = styled(Box)<{ $isBackLink: boolean }>`
     }
 `;
 
-export const ActionLink: React.FC<LinkProps & { contentProps?: object }> = ({
+export const ActionBox: FC<RequiredBy<BoxProps, 'onClick'> & { contentProps?: object }> = ({
+    as = StyledAsLink,
+    contentProps,
+    children,
+    ...rest
+}) => {
+    return (
+        <StyledGuidepost
+            forwardedAs={as}
+            $isBackLink={false}
+            {...rest}
+        >
+            <Heading as='span' type='titleM' {...contentProps}>{children}</Heading>
+            <ArrowRightIcon size="16" />
+        </StyledGuidepost>
+    );
+};
+
+export const ActionLink: FC<LinkProps & { contentProps?: object }> = ({
     children,
     as = Link,
     contentProps,

package/src/components/link.tsx

@@ -72,7 +72,7 @@ function getHref(to: To, isExternal?: boolean): string {
     return createPath(to);
 }
 
-const StyledLink = styled(Box)`
+export const StyledAsLink = styled(Box)`
     /* Basic positioning */
     display: inline-flex;
     align-items: center;
@@ -131,7 +131,7 @@ export const Link = forwardRef<HTMLElement, LinkProps>(({
     const effectiveRel = clsx(Array.from(uniqRel));
 
     return (
-        <StyledLink
+        <StyledAsLink
             // We use the InternalLink only for internal navigation
             forwardedAs={(isEmail || isExternal) ? 'a' : InternalLink}
             href={href}
@@ -143,6 +143,6 @@ export const Link = forwardRef<HTMLElement, LinkProps>(({
         >
             {children}
             {((isExternal && !hideExternalIcon) || showExternalIcon) && <ExternalLinkIcon size="16" />}
-        </StyledLink>
+        </StyledAsLink>
     );
 });

package/src/components/text/text_marketing.tsx

@@ -8,7 +8,7 @@ import type { TextBaseProps } from './text_base.js';
 import { TextBaseComponent } from './text_base.js';
 
 export type MarketingTextSize = 'large' | 'regular' | 'small' | 'extraSmall';
-export type MarketingTextWeight = 'normal' | 'bold';
+export type MarketingTextWeight = 'normal' | 'medium' | 'bold';
 
 export interface TransientMarketingTextProps {
     size?: MarketingTextSize,
@@ -37,6 +37,17 @@ const TEXT_MARKETING_VARIANTS_CSS: TextMarketingVariants = {
                 ${theme.typography.marketing.desktop.bodyL}
             }
         `,
+        medium: css`
+            ${theme.typography.marketing.mobile.bodyLMedium}
+
+            @media (${theme.device.tablet}) {
+                ${theme.typography.marketing.tablet.bodyLMedium}
+            }
+
+            @media (${theme.device.desktop}) {
+                ${theme.typography.marketing.desktop.bodyLMedium}
+            }
+        `,
         bold: css`
             ${theme.typography.marketing.mobile.bodyLStrong}
 
@@ -61,6 +72,17 @@ const TEXT_MARKETING_VARIANTS_CSS: TextMarketingVariants = {
                 ${theme.typography.marketing.desktop.bodyM}
             }
         `,
+        medium: css`
+            ${theme.typography.marketing.mobile.bodyMMedium}
+
+            @media (${theme.device.tablet}) {
+                ${theme.typography.marketing.tablet.bodyMMedium}
+            }
+
+            @media (${theme.device.desktop}) {
+                ${theme.typography.marketing.desktop.bodyMMedium}
+            }
+        `,
         bold: css`
             ${theme.typography.marketing.mobile.bodyMStrong}
 
@@ -85,6 +107,17 @@ const TEXT_MARKETING_VARIANTS_CSS: TextMarketingVariants = {
                 ${theme.typography.marketing.desktop.bodyS}
             }
         `,
+        medium: css`
+            ${theme.typography.marketing.mobile.bodySMedium}
+
+            @media (${theme.device.tablet}) {
+                ${theme.typography.marketing.tablet.bodySMedium}
+            }
+
+            @media (${theme.device.desktop}) {
+                ${theme.typography.marketing.desktop.bodySMedium}
+            }
+        `,
         bold: css`
             ${theme.typography.marketing.mobile.bodySStrong}
 
@@ -109,6 +142,17 @@ const TEXT_MARKETING_VARIANTS_CSS: TextMarketingVariants = {
                 ${theme.typography.marketing.desktop.bodyXs}
             }
         `,
+        medium: css`
+            ${theme.typography.marketing.mobile.bodyXsMedium}
+
+            @media (${theme.device.tablet}) {
+                ${theme.typography.marketing.tablet.bodyXsMedium}
+            }
+
+            @media (${theme.device.desktop}) {
+                ${theme.typography.marketing.desktop.bodyXsMedium}
+            }
+        `,
         bold: css`
             ${theme.typography.marketing.mobile.bodyXsStrong}