@apify/ui-library 1.138.0 → 1.138.2-featpublictasks-2f3d3c.50

package/README.md

@@ -17,7 +17,7 @@ There should be a clear purpose for each component and the component should be p
 No technology-specific logic. We don’t want to use anything technology or codebase-specific (such as Meteor, React router, Next …) as there might be different approaches for the technology where the component is used (examples as linking logic - in Next.js there is Next Link component, same of Next Image instead of using normal <img /> tag). This kind of behavior should not happen on the component level. Browser vs. server - some of the components might be used on the web with SSR (Server Side Renderings) and such a component can’t be using browser-specific features (such as accessing window.location)
 
 ### Supernova typography tokens update
-New supernova typography tokens are available in `supernova_typography_tokens.json`, specific code is generated with `npm run generate-theme` command
+New supernova typography tokens are available in `supernova_typography_tokens.json`, specific code is generated with `pnpm run generate-theme` command
 
 ### Color tokens update
 We use the [Design Tokens Manager](https://www.figma.com/community/plugin/1263743870981744253/design-tokens-manager) Figma plugin to export color tokens from our design files. This tool allows us to convert design-defined color styles into structured token JSON format that developers can easily consume.
@@ -25,6 +25,6 @@ The design team is responsible for exporting and maintaining the tokens. Once fi
 
 The exported tokens are stored in the `src/design_system/colors/figma_color_tokens.light.json` and `src/design_system/colors/figma_color_tokens.dark.json` files.
 
-Source code based on these tokens is generated with `npm run build-color-tokens` command.
+Source code based on these tokens is generated with `pnpm run build-color-tokens` command.
 
-TODO: run automatically on `npm run build`.
+TODO: run automatically on `pnpm run build`.

package/dist/src/components/action_link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action_link.d.ts","sourceRoot":"","sources":["../../../src/components/action_link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGxD,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAQ,KAAK,SAAS,EAAgB,MAAM,WAAW,CAAC;AAoB/D,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG;IAAE,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,CAgBrF,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,SAAS,GAAG;IAAE,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,CAgBhE,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAexC,CAAC"}
+{"version":3,"file":"action_link.d.ts","sourceRoot":"","sources":["../../../src/components/action_link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAGxD,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAQ,KAAK,SAAS,EAAgB,MAAM,WAAW,CAAC;AAoB/D,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG;IAAE,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,CAcrF,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,SAAS,GAAG;IAAE,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,CAchE,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CASxC,CAAC"}

package/dist/src/components/action_link.js

@@ -23,12 +23,12 @@ const StyledGuidepost = styled(Box) `
     }
 `;
 export const ActionBox = ({ as = StyledAsLink, contentProps, children, ...rest }) => {
-    return (_jsxs(StyledGuidepost, { forwardedAs: as, "$isBackLink": false, ...rest, children: [_jsx(Heading, { as: 'span', type: 'titleM', ...contentProps, children: children }), _jsx(ArrowRightIcon, { size: "16" })] }));
+    return (_jsxs(StyledGuidepost, { forwardedAs: as, "$isBackLink": false, ...rest, children: [_jsx(Heading, { as: "span", type: "titleM", ...contentProps, children: children }), _jsx(ArrowRightIcon, { size: "16" })] }));
 };
 export const ActionLink = ({ children, as = Link, contentProps, ...rest }) => {
-    return (_jsxs(StyledGuidepost, { forwardedAs: as, "$isBackLink": false, ...rest, children: [_jsx(Heading, { as: 'span', type: 'titleM', ...contentProps, children: children }), _jsx(ArrowRightIcon, { size: "16" })] }));
+    return (_jsxs(StyledGuidepost, { forwardedAs: as, "$isBackLink": false, ...rest, children: [_jsx(Heading, { as: "span", type: "titleM", ...contentProps, children: children }), _jsx(ArrowRightIcon, { size: "16" })] }));
 };
 export const BackLink = ({ children, as, ...rest }) => {
-    return (_jsxs(StyledGuidepost, { forwardedAs: as || Link, "$isBackLink": true, ...rest, children: [_jsx(ArrowLeftIcon, { size: "16" }), _jsx(Heading, { as: 'span', type: 'titleM', children: children })] }));
+    return (_jsxs(StyledGuidepost, { forwardedAs: as || Link, "$isBackLink": true, ...rest, children: [_jsx(ArrowLeftIcon, { size: "16" }), _jsx(Heading, { as: "span", type: "titleM", children: children })] }));
 };
 //# sourceMappingURL=action_link.js.map

package/dist/src/components/action_link.js.map

@@ -1 +1 @@
-{"version":3,"file":"action_link.js","sourceRoot":"","sources":["../../../src/components/action_link.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAW,MAAM,OAAO,CAAC;AACvC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIhE,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,GAAG,EAAiB,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAkB,YAAY,EAAE,MAAM,WAAW,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE1C,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,CAA0B;;;aAGhD,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;;;;;;;;;mCASF,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;CAG7E,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAoE,CAAC,EACvF,EAAE,GAAG,YAAY,EACjB,YAAY,EACZ,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,EAAE;IACD,OAAO,CACH,MAAC,eAAe,IACZ,WAAW,EAAE,EAAE,iBACF,KAAK,KACd,IAAI,aAER,KAAC,OAAO,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,KAAK,YAAY,YAAG,QAAQ,GAAW,EACvE,KAAC,cAAc,IAAC,IAAI,EAAC,IAAI,GAAG,IACd,CACrB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAA8C,CAAC,EAClE,QAAQ,EACR,EAAE,GAAG,IAAI,EACT,YAAY,EACZ,GAAG,IAAI,EACV,EAAE,EAAE;IACD,OAAO,CACH,MAAC,eAAe,IACZ,WAAW,EAAE,EAAE,iBACF,KAAK,KACd,IAAI,aAER,KAAC,OAAO,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,KAAK,YAAY,YAAG,QAAQ,GAAW,EACvE,KAAC,cAAc,IAAC,IAAI,EAAC,IAAI,GAAG,IACd,CACrB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAwB,CAAC,EAC1C,QAAQ,EACR,EAAE,EACF,GAAG,IAAI,EACV,EAAE,EAAE;IACD,OAAO,CACH,MAAC,eAAe,IACZ,WAAW,EAAE,EAAE,IAAI,IAAI,iBACV,IAAI,KACb,IAAI,aAER,KAAC,aAAa,IAAC,IAAI,EAAC,IAAI,GAAG,EAC3B,KAAC,OAAO,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,YAAE,QAAQ,GAAW,IACvC,CACrB,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"action_link.js","sourceRoot":"","sources":["../../../src/components/action_link.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAW,MAAM,OAAO,CAAC;AACvC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIhE,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,GAAG,EAAiB,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAkB,YAAY,EAAE,MAAM,WAAW,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE1C,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,CAA0B;;;aAGhD,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;;;;;;;;;mCASF,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;CAG7E,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAoE,CAAC,EACvF,EAAE,GAAG,YAAY,EACjB,YAAY,EACZ,QAAQ,EACR,GAAG,IAAI,EACV,EAAE,EAAE;IACD,OAAO,CACH,MAAC,eAAe,IAAC,WAAW,EAAE,EAAE,iBAAe,KAAK,KAAM,IAAI,aAC1D,KAAC,OAAO,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,KAAK,YAAY,YAC5C,QAAQ,GACH,EACV,KAAC,cAAc,IAAC,IAAI,EAAC,IAAI,GAAG,IACd,CACrB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAA8C,CAAC,EAClE,QAAQ,EACR,EAAE,GAAG,IAAI,EACT,YAAY,EACZ,GAAG,IAAI,EACV,EAAE,EAAE;IACD,OAAO,CACH,MAAC,eAAe,IAAC,WAAW,EAAE,EAAE,iBAAe,KAAK,KAAM,IAAI,aAC1D,KAAC,OAAO,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,KAAK,YAAY,YAC5C,QAAQ,GACH,EACV,KAAC,cAAc,IAAC,IAAI,EAAC,IAAI,GAAG,IACd,CACrB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAwB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IACvE,OAAO,CACH,MAAC,eAAe,IAAC,WAAW,EAAE,EAAE,IAAI,IAAI,iBAAe,IAAI,KAAM,IAAI,aACjE,KAAC,aAAa,IAAC,IAAI,EAAC,IAAI,GAAG,EAC3B,KAAC,OAAO,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,YAC3B,QAAQ,GACH,IACI,CACrB,CAAC;AACN,CAAC,CAAC"}

package/dist/src/components/actor_example/actor_example.utils.d.ts

@@ -0,0 +1,17 @@
+import type { IconComponent } from '@apify/ui-icons';
+import type { ActorExampleSchemaFieldType } from '@apify-packages/types';
+export type ActorExampleSchemaPropertyConfig = {
+    Icon: IconComponent;
+    title: string;
+    backgroundColor: string;
+    textColor: string;
+};
+/**
+ * Per-type display config used by the schema field components (badge icon, hover tooltip,
+ * background/text colors). The `var(--actor-schema-field-*)` references are declared on the
+ * `ActorExampleSchemaFieldBadgeWrapper` styled component itself (with a dark-mode override via
+ * `html[data-theme='dark'] &`), so the vars are scoped to the badge — no globals are injected.
+ */
+export declare const actorExampleSchemaPropertyMap: Record<ActorExampleSchemaFieldType, ActorExampleSchemaPropertyConfig>;
+export declare const actorExampleSchemaPropertyDefaultIcon: ({ size, className, title, titleId, ...props }: import("@apify/ui-icons").IconProps) => React.JSX.Element;
+//# sourceMappingURL=actor_example.utils.d.ts.map

package/dist/src/components/actor_example/actor_example.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor_example.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/actor_example/actor_example.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGrD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,uBAAuB,CAAC;AAEzE,MAAM,MAAM,gCAAgC,GAAG;IAC3C,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,6BAA6B,EAAE,MAAM,CAAC,2BAA2B,EAAE,gCAAgC,CA+B/G,CAAC;AAEF,eAAO,MAAM,qCAAqC,2GAAU,CAAC"}

package/dist/src/components/actor_example/actor_example.utils.js

@@ -0,0 +1,41 @@
+import { AnyIcon, BooleanIcon, MenuIcon, NumberIcon, ObjectIcon, TextIcon } from '@apify/ui-icons';
+/**
+ * Per-type display config used by the schema field components (badge icon, hover tooltip,
+ * background/text colors). The `var(--actor-schema-field-*)` references are declared on the
+ * `ActorExampleSchemaFieldBadgeWrapper` styled component itself (with a dark-mode override via
+ * `html[data-theme='dark'] &`), so the vars are scoped to the badge — no globals are injected.
+ */
+export const actorExampleSchemaPropertyMap = {
+    string: {
+        Icon: TextIcon,
+        title: 'Text',
+        backgroundColor: 'var(--actor-schema-field-string-background)',
+        textColor: 'var(--actor-schema-field-string-text)',
+    },
+    number: {
+        Icon: NumberIcon,
+        title: 'Number',
+        backgroundColor: 'var(--actor-schema-field-number-background)',
+        textColor: 'var(--actor-schema-field-number-text)',
+    },
+    boolean: {
+        Icon: BooleanIcon,
+        title: 'Boolean',
+        backgroundColor: 'var(--actor-schema-field-boolean-background)',
+        textColor: 'var(--actor-schema-field-boolean-text)',
+    },
+    array: {
+        Icon: MenuIcon,
+        title: 'List',
+        backgroundColor: 'var(--actor-schema-field-array-background)',
+        textColor: 'var(--actor-schema-field-array-text)',
+    },
+    object: {
+        Icon: ObjectIcon,
+        title: 'Object',
+        backgroundColor: 'var(--actor-schema-field-object-background)',
+        textColor: 'var(--actor-schema-field-object-text)',
+    },
+};
+export const actorExampleSchemaPropertyDefaultIcon = AnyIcon;
+//# sourceMappingURL=actor_example.utils.js.map

package/dist/src/components/actor_example/actor_example.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor_example.utils.js","sourceRoot":"","sources":["../../../../src/components/actor_example/actor_example.utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAWnG;;;;;GAKG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAA0E;IAChH,MAAM,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,MAAM;QACb,eAAe,EAAE,6CAA6C;QAC9D,SAAS,EAAE,uCAAuC;KACrD;IACD,MAAM,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,QAAQ;QACf,eAAe,EAAE,6CAA6C;QAC9D,SAAS,EAAE,uCAAuC;KACrD;IACD,OAAO,EAAE;QACL,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE,SAAS;QAChB,eAAe,EAAE,8CAA8C;QAC/D,SAAS,EAAE,wCAAwC;KACtD;IACD,KAAK,EAAE;QACH,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,MAAM;QACb,eAAe,EAAE,4CAA4C;QAC7D,SAAS,EAAE,sCAAsC;KACpD;IACD,MAAM,EAAE;QACJ,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,QAAQ;QACf,eAAe,EAAE,6CAA6C;QAC9D,SAAS,EAAE,uCAAuC;KACrD;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,qCAAqC,GAAG,OAAO,CAAC"}

package/dist/src/components/actor_example/actor_example_avatar.d.ts

@@ -0,0 +1,13 @@
+export declare const actorExampleAvatarClassNames: {
+    ROOT: string;
+};
+export type ActorExampleAvatarProps = {
+    title?: string;
+    name: string;
+    pictureUrl?: string;
+    fallbackPictureUrl: string;
+    size?: number;
+    className?: string;
+};
+export declare const ActorExampleAvatar: ({ title, name, pictureUrl, fallbackPictureUrl, size, className, }: ActorExampleAvatarProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=actor_example_avatar.d.ts.map

package/dist/src/components/actor_example/actor_example_avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor_example_avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/actor_example/actor_example_avatar.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,4BAA4B;;CAExC,CAAC;AAOF,MAAM,MAAM,uBAAuB,GAAG;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,mEAOhC,uBAAuB,4CAkCzB,CAAC"}

package/dist/src/components/actor_example/actor_example_avatar.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx } from 'clsx';
+import { useCallback, useMemo } from 'react';
+import styled from 'styled-components';
+import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
+const DEFAULT_SIZE = 36;
+export const actorExampleAvatarClassNames = {
+    ROOT: 'actor-example-avatar',
+};
+const ActorExampleAvatarWrapper = styled.img `
+    flex-shrink: 0;
+    object-fit: cover;
+`;
+export const ActorExampleAvatar = ({ title, name, pictureUrl, fallbackPictureUrl, size = DEFAULT_SIZE, className, }) => {
+    const { generateProxyImageUrl } = useSharedUiDependencies();
+    // Mirrors apify-web's `<Image defaultSrc=…>` behaviour: if the primary src fails to load,
+    // swap in the fallback so the `<img>` element is always present.
+    const handlePictureError = useCallback((event) => {
+        if (!event.currentTarget.src.endsWith(fallbackPictureUrl)) {
+            // eslint-disable-next-line no-param-reassign
+            event.currentTarget.src = fallbackPictureUrl;
+            // eslint-disable-next-line no-param-reassign
+            event.currentTarget.srcset = fallbackPictureUrl;
+        }
+    }, [fallbackPictureUrl]);
+    const proxyPictureUrl = useMemo(() => {
+        if (!generateProxyImageUrl || !pictureUrl)
+            return pictureUrl;
+        return generateProxyImageUrl(pictureUrl, { resize: { height: size * 2, width: size * 2 } });
+    }, [pictureUrl, generateProxyImageUrl, size]);
+    const src = proxyPictureUrl || fallbackPictureUrl;
+    return (_jsx(ActorExampleAvatarWrapper, { src: src, alt: title ?? name, width: size, height: size, className: clsx(actorExampleAvatarClassNames.ROOT, className), onError: handlePictureError }));
+};
+//# sourceMappingURL=actor_example_avatar.js.map

package/dist/src/components/actor_example/actor_example_avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor_example_avatar.js","sourceRoot":"","sources":["../../../../src/components/actor_example/actor_example_avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAE5B,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAE1E,MAAM,YAAY,GAAG,EAAE,CAAC;AAExB,MAAM,CAAC,MAAM,4BAA4B,GAAG;IACxC,IAAI,EAAE,sBAAsB;CAC/B,CAAC;AAEF,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG3C,CAAC;AAWF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAC/B,KAAK,EACL,IAAI,EACJ,UAAU,EACV,kBAAkB,EAClB,IAAI,GAAG,YAAY,EACnB,SAAS,GACa,EAAE,EAAE;IAC1B,MAAM,EAAE,qBAAqB,EAAE,GAAG,uBAAuB,EAAE,CAAC;IAE5D,0FAA0F;IAC1F,iEAAiE;IACjE,MAAM,kBAAkB,GAAG,WAAW,CAClC,CAAC,KAA6C,EAAE,EAAE;QAC9C,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC;YACxD,6CAA6C;YAC7C,KAAK,CAAC,aAAa,CAAC,GAAG,GAAG,kBAAkB,CAAC;YAC7C,6CAA6C;YAC7C,KAAK,CAAC,aAAa,CAAC,MAAM,GAAG,kBAAkB,CAAC;QACpD,CAAC;IACL,CAAC,EACD,CAAC,kBAAkB,CAAC,CACvB,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,CAAC,qBAAqB,IAAI,CAAC,UAAU;YAAE,OAAO,UAAU,CAAC;QAC7D,OAAO,qBAAqB,CAAC,UAAU,EAAE,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC;IAChG,CAAC,EAAE,CAAC,UAAU,EAAE,qBAAqB,EAAE,IAAI,CAAC,CAAC,CAAC;IAE9C,MAAM,GAAG,GAAG,eAAe,IAAI,kBAAkB,CAAC;IAElD,OAAO,CACH,KAAC,yBAAyB,IACtB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,KAAK,IAAI,IAAI,EAClB,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,IAAI,CAAC,4BAA4B,CAAC,IAAI,EAAE,SAAS,CAAC,EAC7D,OAAO,EAAE,kBAAkB,GAC7B,CACL,CAAC;AACN,CAAC,CAAC"}

package/dist/src/components/actor_example/actor_example_card.d.ts

@@ -0,0 +1,28 @@
+export declare const actorExampleCardClassNames: {
+    ROOT: string;
+    CONTENT: string;
+    BADGE: string;
+    TITLE: string;
+    FOOTER: string;
+    RUN_BUTTON: string;
+    DETAIL_BUTTON: string;
+};
+export type ActorExampleCardProps = {
+    title: string;
+    badge?: string;
+    /** Owning actor's id — flows into the run button's analytics event. */
+    actorId: string;
+    runUrl: string;
+    runLabel: string;
+    /**
+     * Tracking element id for the run button (e.g. `actorInfo.examples.run`). The card's
+     * `title` is forwarded as `cardTitle` automatically.
+     */
+    runTrackingElement: string;
+    detailUrl?: string;
+    detailLabel: string;
+    detailOpensInNewTab?: boolean;
+    className?: string;
+};
+export declare const ActorExampleCard: ({ title, badge, actorId, runUrl, runLabel, runTrackingElement, detailUrl, detailLabel, detailOpensInNewTab, className, }: ActorExampleCardProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=actor_example_card.d.ts.map

package/dist/src/components/actor_example/actor_example_card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor_example_card.d.ts","sourceRoot":"","sources":["../../../../src/components/actor_example/actor_example_card.tsx"],"names":[],"mappings":"AAYA,eAAO,MAAM,0BAA0B;;;;;;;;CAQtC,CAAC;AA6DF,MAAM,MAAM,qBAAqB,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,kBAAkB,EAAE,MAAM,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,0HAW9B,qBAAqB,4CAsCvB,CAAC"}

package/dist/src/components/actor_example/actor_example_card.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx } from 'clsx';
+import styled from 'styled-components';
+import { ExternalLinkIcon } from '@apify/ui-icons';
+import { theme } from '../../design_system/theme.js';
+import { Badge } from '../badge.js';
+import { Box } from '../box.js';
+import { Button } from '../button.js';
+import { Heading } from '../text/index.js';
+import { ActorExampleRunButton, ActorExampleRunButtonLightningIcon } from './actor_example_run_button.js';
+export const actorExampleCardClassNames = {
+    ROOT: 'actor-example-card',
+    CONTENT: 'actor-example-card__content',
+    BADGE: 'actor-example-card__badge',
+    TITLE: 'actor-example-card__title',
+    FOOTER: 'actor-example-card__footer',
+    RUN_BUTTON: 'actor-example-card__run-button',
+    DETAIL_BUTTON: 'actor-example-card__detail-button',
+};
+const ActorExampleCardWrapper = styled(Box) `
+    min-width: 0;
+    background-color: ${theme.color.neutral.background};
+    border: 1px solid ${theme.color.neutral.border};
+    border-radius: ${theme.radius.radius12};
+    overflow: hidden;
+
+    .${actorExampleCardClassNames.CONTENT} {
+        padding: ${theme.space.space16};
+        display: flex;
+        flex-direction: column;
+        gap: ${theme.space.space8};
+    }
+
+    .${actorExampleCardClassNames.BADGE} {
+        min-width: 0;
+        max-width: 100%;
+
+        span {
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    .${actorExampleCardClassNames.TITLE} {
+        min-height: 7.2rem; /* 3 lines of text with line-height 2.4rem */
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+    }
+
+    .${actorExampleCardClassNames.FOOTER} {
+        padding: ${theme.space.space12} ${theme.space.space16};
+        background-color: ${theme.color.neutral.backgroundMuted};
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: ${theme.space.space4};
+    }
+
+    .${actorExampleCardClassNames.RUN_BUTTON}, .${actorExampleCardClassNames.DETAIL_BUTTON} {
+        min-width: 0;
+
+        span {
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        svg {
+            flex-shrink: 0;
+        }
+    }
+`;
+export const ActorExampleCard = ({ title, badge, actorId, runUrl, runLabel, runTrackingElement, detailUrl, detailLabel, detailOpensInNewTab = true, className, }) => (_jsxs(ActorExampleCardWrapper, { className: clsx(actorExampleCardClassNames.ROOT, className), children: [_jsxs(Box, { className: actorExampleCardClassNames.CONTENT, children: [badge && (_jsx(Badge, { size: "extra_small", variant: "primary_blue", className: actorExampleCardClassNames.BADGE, children: badge })), _jsx(Heading, { as: "h2", className: actorExampleCardClassNames.TITLE, children: title })] }), _jsxs(Box, { className: actorExampleCardClassNames.FOOTER, children: [_jsx(ActorExampleRunButton, { size: "small", variant: "secondary", actorId: actorId, consoleUrl: runUrl, trackingProps: { element: runTrackingElement, cardTitle: title }, className: actorExampleCardClassNames.RUN_BUTTON, LeftIcon: ActorExampleRunButtonLightningIcon, children: runLabel }), detailUrl && detailLabel && (_jsx(Button, { size: "small", variant: "tertiary", to: detailUrl, target: detailOpensInNewTab ? '_blank' : undefined, className: actorExampleCardClassNames.DETAIL_BUTTON, RightIcon: ExternalLinkIcon, children: detailLabel }))] })] }));
+//# sourceMappingURL=actor_example_card.js.map

package/dist/src/components/actor_example/actor_example_card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor_example_card.js","sourceRoot":"","sources":["../../../../src/components/actor_example/actor_example_card.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/actor_example/actor_example_preview.d.ts

@@ -0,0 +1,28 @@
+export declare const actorExamplePreviewClassNames: {
+    CONTAINER: string;
+    CONTENT: string;
+    BADGE: string;
+    BADGE_PICTURE: string;
+    BADGE_CONTENT: string;
+    BADGE_NAME: string;
+    BADGE_TECHNICAL_NAME: string;
+    SCHEMA: string;
+    SCHEMA_FIELD: string;
+    SCHEMA_FIELD_NAME: string;
+    SCHEMA_MORE: string;
+};
+export type ActorExamplePreviewField = {
+    name: string;
+    title?: string;
+};
+export type ActorExamplePreviewProps = {
+    actorName: string;
+    actorTitle: string | undefined;
+    actorPictureUrl: string | undefined;
+    actorPictureFallbackUrl: string;
+    outputFields: ActorExamplePreviewField[];
+    staticWebUrl: string;
+    username: string;
+};
+export declare const ActorExamplePreview: ({ actorName, actorTitle, actorPictureUrl, actorPictureFallbackUrl, outputFields, staticWebUrl, username, }: ActorExamplePreviewProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=actor_example_preview.d.ts.map

package/dist/src/components/actor_example/actor_example_preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor_example_preview.d.ts","sourceRoot":"","sources":["../../../../src/components/actor_example/actor_example_preview.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,6BAA6B;;;;;;;;;;;;CAYzC,CAAC;AA2LF,MAAM,MAAM,wBAAwB,GAAG;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACnC,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,uBAAuB,EAAE,MAAM,CAAC;IAChC,YAAY,EAAE,wBAAwB,EAAE,CAAC;IACzC,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,4GAQjC,wBAAwB,4CA+D1B,CAAC"}

package/dist/src/components/actor_example/actor_example_preview.js

@@ -0,0 +1,208 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { keyframes } from 'styled-components';
+import { theme } from '../../design_system/theme.js';
+import { Heading, Text } from '../text/index.js';
+import { ActorExampleAvatar } from './actor_example_avatar.js';
+const MAX_VISIBLE_FIELDS = 4;
+const BADGE_PICTURE_SIZE = 36;
+export const actorExamplePreviewClassNames = {
+    CONTAINER: 'actor-example-preview',
+    CONTENT: 'actor-example-preview__content',
+    BADGE: 'actor-example-preview__badge',
+    BADGE_PICTURE: 'actor-example-preview__badge-picture',
+    BADGE_CONTENT: 'actor-example-preview__badge-content',
+    BADGE_NAME: 'actor-example-preview__badge-name',
+    BADGE_TECHNICAL_NAME: 'actor-example-preview__badge-technical-name',
+    SCHEMA: 'actor-example-preview__schema',
+    SCHEMA_FIELD: 'actor-example-preview__schema-field',
+    SCHEMA_FIELD_NAME: 'actor-example-preview__schema-field-name',
+    SCHEMA_MORE: 'actor-example-preview__schema-more',
+};
+const VISUAL_SEPARATOR_SIZE = '0.6rem';
+const VISUAL_CONNECTOR_LENGTH = '2.4rem';
+const noisePulse = keyframes `
+    0%, 100% { opacity: 0.1; }
+    50%      { opacity: 0.4; }
+`;
+const ActorExamplePreviewWrapper = styled.div `
+    @property --noise-cx {
+        syntax: '<percentage>';
+        inherits: false;
+        initial-value: 50%;
+    }
+
+    @property --noise-cy {
+        syntax: '<percentage>';
+        inherits: false;
+        initial-value: 50%;
+    }
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: -${theme.space.space32};
+        bottom: 0;
+        inset-inline: -${theme.space.space32};
+        background-image: url(${({ $noiseImageUrl }) => $noiseImageUrl});
+        background-position: center;
+        background-repeat: repeat;
+        mask-image:
+            linear-gradient(to bottom, transparent, black 30%, black 70%, transparent),
+            linear-gradient(to right, transparent, black 30%, black 70%, transparent);
+        mask-composite: intersect;
+        -webkit-mask-image:
+            linear-gradient(to bottom, transparent, black 30%, black 70%, transparent),
+            linear-gradient(to right, transparent, black 30%, black 70%, transparent);
+        -webkit-mask-composite: destination-in;
+        animation: ${noisePulse} 4s ease-in-out infinite;
+        opacity: 0.1;
+        pointer-events: none;
+
+        @media ${theme.device.desktop} {
+            inset: 0;
+            mask-image: radial-gradient(circle at var(--noise-cx) var(--noise-cy), black 30%, transparent 70%);
+            -webkit-mask-image: radial-gradient(circle at var(--noise-cx) var(--noise-cy), black 30%, transparent 70%);
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            animation: none;
+            mask-image: none;
+            -webkit-mask-image: none;
+        }
+    }
+
+    .${actorExamplePreviewClassNames.CONTENT} {
+        max-width: 100%;
+        display: flex;
+        gap: ${theme.space.space32};
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .${actorExamplePreviewClassNames.BADGE} {
+        width: 100%;
+        min-width: 0;
+        padding: ${theme.space.space12};
+        border: 1px solid ${theme.color.neutral.separatorSubtle};
+        border-radius: ${theme.radius.radius12};
+        background-color: ${theme.color.neutral.background};
+        display: flex;
+        gap: ${theme.space.space8};
+        align-items: center;
+        position: relative;
+    }
+
+    .${actorExamplePreviewClassNames.BADGE_PICTURE} {
+        border: 1px solid ${theme.color.neutral.separatorSubtle};
+        border-radius: ${theme.radius.radius8};
+        flex-shrink: 0;
+        object-fit: cover;
+    }
+
+    .${actorExamplePreviewClassNames.BADGE_CONTENT} {
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+    }
+
+    .${actorExamplePreviewClassNames.BADGE_NAME}, .${actorExamplePreviewClassNames.BADGE_TECHNICAL_NAME} {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+
+    .${actorExamplePreviewClassNames.SCHEMA} {
+        width: 100%;
+        min-width: 0;
+        padding: ${theme.space.space8};
+        border: 1px solid ${theme.color.primary.text};
+        border-radius: ${theme.radius.radius12};
+        background-color: ${theme.color.neutral.background};
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: ${theme.space.space4};
+        position: relative;
+
+        &::before {
+            bottom: calc(100% + 0.5rem);
+            left: calc(50% - 0.5px);
+            width: 1px;
+            height: ${VISUAL_CONNECTOR_LENGTH};
+            background-color: ${theme.color.primary.text};
+            content: '';
+            display: block;
+            position: absolute;
+        }
+
+        &::after {
+            bottom: calc(100% + 0.5rem);
+            left: calc(50% - (${VISUAL_SEPARATOR_SIZE} / 2));
+            margin: 0 auto;
+            width: ${VISUAL_SEPARATOR_SIZE};
+            height: ${VISUAL_CONNECTOR_LENGTH};
+            border-block: 1px solid ${theme.color.primary.text};
+            box-sizing: border-box;
+            content: '';
+            display: block;
+            position: absolute;
+        }
+    }
+
+    .${actorExamplePreviewClassNames.SCHEMA_FIELD} {
+        width: 100%;
+        padding: ${theme.space.space4};
+        border: 1px solid ${theme.color.primary.borderSubtle};
+        border-radius: ${theme.radius.radius6};
+        display: flex;
+        gap: ${theme.space.space8};
+        align-items: center;
+        justify-content: center;
+    }
+
+    .${actorExamplePreviewClassNames.SCHEMA_FIELD_NAME} {
+        min-width: 0;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+
+    .${actorExamplePreviewClassNames.SCHEMA_MORE} {
+        height: 2.4rem;
+        margin-top: 2rem;
+        padding: 0 ${theme.space.space8};
+        border: 1px solid ${theme.color.primary.borderSubtle};
+        border-radius: ${theme.radius.radius12};
+        background-color: ${theme.color.primary.background};
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+
+        &::before {
+            top: calc(-1px - 1.6rem);
+            left: calc(50% - 0.5px);
+            width: 1px;
+            height: 0.8rem;
+            background-color: ${theme.color.primary.text};
+            content: '';
+            display: block;
+            position: absolute;
+        }
+    }
+`;
+export const ActorExamplePreview = ({ actorName, actorTitle, actorPictureUrl, actorPictureFallbackUrl, outputFields, staticWebUrl, username, }) => {
+    const visibleFields = outputFields.slice(0, MAX_VISIBLE_FIELDS);
+    const remainingCount = Math.max(0, outputFields.length - MAX_VISIBLE_FIELDS);
+    return (_jsx(ActorExamplePreviewWrapper, { className: actorExamplePreviewClassNames.CONTAINER, "$noiseImageUrl": `${staticWebUrl}/img/pattern/noise.svg`, children: _jsxs("div", { className: actorExamplePreviewClassNames.CONTENT, children: [_jsxs("div", { className: actorExamplePreviewClassNames.BADGE, children: [_jsx(ActorExampleAvatar, { title: actorTitle, name: actorName, pictureUrl: actorPictureUrl, fallbackPictureUrl: actorPictureFallbackUrl, size: BADGE_PICTURE_SIZE, className: actorExamplePreviewClassNames.BADGE_PICTURE }), _jsxs("div", { className: actorExamplePreviewClassNames.BADGE_CONTENT, children: [_jsx(Heading, { as: "span", type: "titleS", className: actorExamplePreviewClassNames.BADGE_NAME, children: actorTitle ?? actorName }), _jsxs(Text, { as: "span", type: "code", size: "small", color: theme.color.neutral.textSubtle, className: actorExamplePreviewClassNames.BADGE_TECHNICAL_NAME, children: [username, "/", actorName] })] })] }), visibleFields.length > 0 && (_jsxs("div", { className: actorExamplePreviewClassNames.SCHEMA, children: [visibleFields.map((field) => (_jsx("div", { className: actorExamplePreviewClassNames.SCHEMA_FIELD, children: _jsx(Text, { as: "span", size: "small", color: theme.color.neutral.text, className: actorExamplePreviewClassNames.SCHEMA_FIELD_NAME, children: field.title ?? field.name }) }, field.name))), remainingCount > 0 && (_jsxs(Text, { as: "span", size: "small", color: theme.color.primary.text, className: actorExamplePreviewClassNames.SCHEMA_MORE, children: ["+", remainingCount, " ", remainingCount === 1 ? 'field' : 'fields'] }))] }))] }) }));
+};
+//# sourceMappingURL=actor_example_preview.js.map

package/dist/src/components/actor_example/actor_example_preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor_example_preview.js","sourceRoot":"","sources":["../../../../src/components/actor_example/actor_example_preview.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,kBAAkB,GAAG,CAAC,CAAC;AAC7B,MAAM,kBAAkB,GAAG,EAAE,CAAC;AAE9B,MAAM,CAAC,MAAM,6BAA6B,GAAG;IACzC,SAAS,EAAE,uBAAuB;IAClC,OAAO,EAAE,gCAAgC;IACzC,KAAK,EAAE,8BAA8B;IACrC,aAAa,EAAE,sCAAsC;IACrD,aAAa,EAAE,sCAAsC;IACrD,UAAU,EAAE,mCAAmC;IAC/C,oBAAoB,EAAE,6CAA6C;IACnE,MAAM,EAAE,+BAA+B;IACvC,YAAY,EAAE,qCAAqC;IACnD,iBAAiB,EAAE,0CAA0C;IAC7D,WAAW,EAAE,oCAAoC;CACpD,CAAC;AAEF,MAAM,qBAAqB,GAAG,QAAQ,CAAC;AACvC,MAAM,uBAAuB,GAAG,QAAQ,CAAC;AAEzC,MAAM,UAAU,GAAG,SAAS,CAAA;;;CAG3B,CAAC;AAEF,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAA4B;;;;;;;;;;;;;;;;;;;;;;;gBAuBzD,KAAK,CAAC,KAAK,CAAC,OAAO;;yBAEV,KAAK,CAAC,KAAK,CAAC,OAAO;gCACZ,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,cAAc;;;;;;;;;;;qBAWjD,UAAU;;;;iBAId,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;;;;;;;;OAa9B,6BAA6B,CAAC,OAAO;;;eAG7B,KAAK,CAAC,KAAK,CAAC,OAAO;;;;;;OAM3B,6BAA6B,CAAC,KAAK;;;mBAGvB,KAAK,CAAC,KAAK,CAAC,OAAO;4BACV,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe;yBACtC,KAAK,CAAC,MAAM,CAAC,QAAQ;4BAClB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU;;eAE3C,KAAK,CAAC,KAAK,CAAC,MAAM;;;;;OAK1B,6BAA6B,CAAC,aAAa;4BACtB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,eAAe;yBACtC,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;OAKtC,6BAA6B,CAAC,aAAa;;;;;;;OAO3C,6BAA6B,CAAC,UAAU,MAAM,6BAA6B,CAAC,oBAAoB;;;;;;OAMhG,6BAA6B,CAAC,MAAM;;;mBAGxB,KAAK,CAAC,KAAK,CAAC,MAAM;4BACT,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;yBAC3B,KAAK,CAAC,MAAM,CAAC,QAAQ;4BAClB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU;;;;eAI3C,KAAK,CAAC,KAAK,CAAC,MAAM;;;;;;;sBAOX,uBAAuB;gCACb,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;;;;;;;;gCAQxB,qBAAqB;;qBAEhC,qBAAqB;sBACpB,uBAAuB;sCACP,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;;;;;;;;OAQvD,6BAA6B,CAAC,YAAY;;mBAE9B,KAAK,CAAC,KAAK,CAAC,MAAM;4BACT,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY;yBACnC,KAAK,CAAC,MAAM,CAAC,OAAO;;eAE9B,KAAK,CAAC,KAAK,CAAC,MAAM;;;;;OAK1B,6BAA6B,CAAC,iBAAiB;;;;;;;OAO/C,6BAA6B,CAAC,WAAW;;;qBAG3B,KAAK,CAAC,KAAK,CAAC,MAAM;4BACX,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY;yBACnC,KAAK,CAAC,MAAM,CAAC,QAAQ;4BAClB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU;;;;;;;;;;;gCAW1B,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;;;;;;CAMvD,CAAC;AAiBF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAChC,SAAS,EACT,UAAU,EACV,eAAe,EACf,uBAAuB,EACvB,YAAY,EACZ,YAAY,EACZ,QAAQ,GACe,EAAE,EAAE;IAC3B,MAAM,aAAa,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC,EAAE,kBAAkB,CAAC,CAAC;IAChE,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,YAAY,CAAC,MAAM,GAAG,kBAAkB,CAAC,CAAC;IAE7E,OAAO,CACH,KAAC,0BAA0B,IACvB,SAAS,EAAE,6BAA6B,CAAC,SAAS,oBAClC,GAAG,YAAY,wBAAwB,YAEvD,eAAK,SAAS,EAAE,6BAA6B,CAAC,OAAO,aACjD,eAAK,SAAS,EAAE,6BAA6B,CAAC,KAAK,aAC/C,KAAC,kBAAkB,IACf,KAAK,EAAE,UAAU,EACjB,IAAI,EAAE,SAAS,EACf,UAAU,EAAE,eAAe,EAC3B,kBAAkB,EAAE,uBAAuB,EAC3C,IAAI,EAAE,kBAAkB,EACxB,SAAS,EAAE,6BAA6B,CAAC,aAAa,GACxD,EACF,eAAK,SAAS,EAAE,6BAA6B,CAAC,aAAa,aACvD,KAAC,OAAO,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,6BAA6B,CAAC,UAAU,YAC/E,UAAU,IAAI,SAAS,GAClB,EACV,MAAC,IAAI,IACD,EAAE,EAAC,MAAM,EACT,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EACrC,SAAS,EAAE,6BAA6B,CAAC,oBAAoB,aAE5D,QAAQ,OAAG,SAAS,IAClB,IACL,IACJ,EACL,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,CACzB,eAAK,SAAS,EAAE,6BAA6B,CAAC,MAAM,aAC/C,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC1B,cAAsB,SAAS,EAAE,6BAA6B,CAAC,YAAY,YACvE,KAAC,IAAI,IACD,EAAE,EAAC,MAAM,EACT,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAC/B,SAAS,EAAE,6BAA6B,CAAC,iBAAiB,YAEzD,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,GACvB,IARD,KAAK,CAAC,IAAI,CASd,CACT,CAAC,EACD,cAAc,GAAG,CAAC,IAAI,CACnB,MAAC,IAAI,IACD,EAAE,EAAC,MAAM,EACT,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,EAC/B,SAAS,EAAE,6BAA6B,CAAC,WAAW,kBAElD,cAAc,OAAG,cAAc,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,IACzD,CACV,IACC,CACT,IACC,GACmB,CAChC,CAAC;AACN,CAAC,CAAC"}

package/dist/src/components/actor_example/actor_example_run_button.d.ts

@@ -0,0 +1,33 @@
+import type React from 'react';
+import { type IconProps } from '@apify/ui-icons';
+import { type ButtonProps } from '../button.js';
+import type { SharedTextProps } from '../text/text_shared.js';
+/**
+ * Brand-coloured lightning icon — the standard leading slot for the card variant of the run
+ * button. Hero-style call sites typically render without an icon; pass this explicitly via
+ * `LeftIcon` when you want it.
+ */
+export declare const ActorExampleRunButtonLightningIcon: (props: IconProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * "Run example" CTA shared by the actor-detail Examples tab (apify-core Console) and the
+ * public actor-example landing/hero pages (apify-web). Encapsulates two universal defaults
+ * for this CTA — `target="_self"` so external `console.apify.com` links don't open in a new
+ * tab, and `hideExternalIcon` so the lightning leading icon (when present) is the only
+ * action affordance — and pins the analytics shape to `{ element, cardTitle, actorId }`.
+ *
+ * Tracking flows through the host app's `trackClick` (apify-web's analytics, console's
+ * client tracker) via the underlying `Button`.
+ */
+export type ActorExampleRunButtonProps = Pick<ButtonProps, 'size' | 'variant' | 'LeftIcon' | 'RightIcon'> & {
+    actorId: string;
+    consoleUrl: string;
+    trackingProps: {
+        element: string;
+        cardTitle: string;
+    };
+    textSize?: SharedTextProps['size'];
+    className?: string;
+    children: React.ReactNode;
+};
+export declare const ActorExampleRunButton: ({ actorId, consoleUrl, size, variant, trackingProps, children, ...buttonProps }: ActorExampleRunButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=actor_example_run_button.d.ts.map

package/dist/src/components/actor_example/actor_example_run_button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor_example_run_button.d.ts","sourceRoot":"","sources":["../../../../src/components/actor_example/actor_example_run_button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,SAAS,EAAiB,MAAM,iBAAiB,CAAC;AAGhE,OAAO,EAAE,KAAK,WAAW,EAAU,MAAM,cAAc,CAAC;AACxD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAE9D;;;;GAIG;AACH,eAAO,MAAM,kCAAkC,GAAI,OAAO,SAAS,4CAElE,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC,GAAG;IACxG,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE;QACX,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,QAAQ,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,iFAQnC,0BAA0B,4CAa5B,CAAC"}

package/dist/src/components/actor_example/actor_example_run_button.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LightningIcon } from '@apify/ui-icons';
+import { theme } from '../../design_system/theme.js';
+import { Button } from '../button.js';
+/**
+ * Brand-coloured lightning icon — the standard leading slot for the card variant of the run
+ * button. Hero-style call sites typically render without an icon; pass this explicitly via
+ * `LeftIcon` when you want it.
+ */
+export const ActorExampleRunButtonLightningIcon = (props) => (_jsx(LightningIcon, { ...props, color: theme.color.primary.action }));
+export const ActorExampleRunButton = ({ actorId, consoleUrl, size = 'extraLarge', variant = 'primary', trackingProps, children, ...buttonProps }) => (_jsx(Button, { ...buttonProps, to: consoleUrl, size: size, variant: variant, target: "_self", hideExternalIcon: true, trackingId: trackingProps.element, trackingData: { cardTitle: trackingProps.cardTitle, actorId }, children: children }));
+//# sourceMappingURL=actor_example_run_button.js.map

package/dist/src/components/actor_example/actor_example_run_button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor_example_run_button.js","sourceRoot":"","sources":["../../../../src/components/actor_example/actor_example_run_button.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAkB,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhE,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAoB,MAAM,EAAE,MAAM,cAAc,CAAC;AAGxD;;;;GAIG;AACH,MAAM,CAAC,MAAM,kCAAkC,GAAG,CAAC,KAAgB,EAAE,EAAE,CAAC,CACpE,KAAC,aAAa,OAAK,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,GAAI,CAClE,CAAC;AAwBF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EAClC,OAAO,EACP,UAAU,EACV,IAAI,GAAG,YAAY,EACnB,OAAO,GAAG,SAAS,EACnB,aAAa,EACb,QAAQ,EACR,GAAG,WAAW,EACW,EAAE,EAAE,CAAC,CAC9B,KAAC,MAAM,OACC,WAAW,EACf,EAAE,EAAE,UAAU,EACd,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,MAAM,EAAC,OAAO,EACd,gBAAgB,QAChB,UAAU,EAAE,aAAa,CAAC,OAAO,EACjC,YAAY,EAAE,EAAE,SAAS,EAAE,aAAa,CAAC,SAAS,EAAE,OAAO,EAAE,YAE5D,QAAQ,GACJ,CACZ,CAAC"}

package/dist/src/components/actor_example/actor_example_schema.d.ts

@@ -0,0 +1,20 @@
+import type { ActorExampleSchemaFieldSerialized } from '@apify-packages/types';
+export declare const actorExampleSchemaClassNames: {
+    ROOT: string;
+};
+type Props = {
+    fields: ActorExampleSchemaFieldSerialized[];
+    canCollapse?: boolean;
+    className?: string;
+    /**
+     * Per-row slot rendered before the type badge on each top-level field
+     * (nested children render plain). Useful for configurators that need a
+     * checkbox or other control alongside each field.
+     */
+    LeadingSlot?: (props: {
+        field: ActorExampleSchemaFieldSerialized;
+    }) => React.ReactNode;
+};
+export declare const ActorExampleSchema: ({ fields, canCollapse, className, LeadingSlot }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=actor_example_schema.d.ts.map