@apify/ui-library 1.137.2 → 1.137.3-featpublictasks-2f3d3c.26

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,4CA+BzB,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,CAAC,CAAC,KAA6C,EAAE,EAAE;QACrF,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC;YAC5D,6CAA6C;YACzC,KAAK,CAAC,aAAa,CAAC,GAAG,GAAG,kBAAkB,CAAC;YAC7C,6CAA6C;YAC7C,KAAK,CAAC,aAAa,CAAC,MAAM,GAAG,kBAAkB,CAAC;QACpD,CAAC;IACL,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,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_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;AA4LF,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,4CA4D1B,CAAC"}

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

@@ -0,0 +1,209 @@
+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":"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"}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"actor_example_schema.d.ts","sourceRoot":"","sources":["../../../../src/components/actor_example/actor_example_schema.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,uBAAuB,CAAC;AAK/E,eAAO,MAAM,4BAA4B;;CAExC,CAAC;AAaF,KAAK,KAAK,GAAG;IACT,MAAM,EAAE,iCAAiC,EAAE,CAAC;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,iCAAiC,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;CAC1F,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,iDAAyD,KAAK,4CAyBhG,CAAC"}

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useState } from 'react';
+import styled from 'styled-components';
+import { theme } from '../../design_system/theme.js';
+import { ActorExampleSchemaField } from './actor_example_schema_field.js';
+export const actorExampleSchemaClassNames = {
+    ROOT: 'actor-example-schema',
+};
+const ActorExampleSchemaWrapper = styled.div `
+    width: 100%;
+    padding: ${theme.space.space16};
+    background-color: ${theme.color.neutral.background};
+    border-radius: 1rem;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    gap: ${theme.space.space16};
+`;
+export const ActorExampleSchema = ({ fields, canCollapse = false, className, LeadingSlot }) => {
+    const [collapsedFields, setCollapsedFields] = useState([]);
+    const handleToggleCollapse = (id) => {
+        setCollapsedFields((current) => (current.includes(id)
+            ? current.filter((currentId) => currentId !== id)
+            : [...current, id]));
+    };
+    return (_jsx(ActorExampleSchemaWrapper, { className: clsx(actorExampleSchemaClassNames.ROOT, className), children: fields.map((field) => (_jsx(ActorExampleSchemaField, { field: field, canCollapse: canCollapse, collapsedFields: collapsedFields, onToggleCollapsed: handleToggleCollapse, leadingSlot: LeadingSlot ? _jsx(LeadingSlot, { field: field }) : undefined }, field._id))) }));
+};
+//# sourceMappingURL=actor_example_schema.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"actor_example_schema.js","sourceRoot":"","sources":["../../../../src/components/actor_example/actor_example_schema.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAIvC,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAE1E,MAAM,CAAC,MAAM,4BAA4B,GAAG;IACxC,IAAI,EAAE,sBAAsB;CAC/B,CAAC;AAEF,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAA;;eAE7B,KAAK,CAAC,KAAK,CAAC,OAAO;wBACV,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU;;;;;WAK3C,KAAK,CAAC,KAAK,CAAC,OAAO;CAC7B,CAAC;AAcF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAE,MAAM,EAAE,WAAW,GAAG,KAAK,EAAE,SAAS,EAAE,WAAW,EAAS,EAAE,EAAE;IACjG,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IAErE,MAAM,oBAAoB,GAAG,CAAC,EAAU,EAAE,EAAE;QACxC,kBAAkB,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAC5B,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;YAChB,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,KAAK,EAAE,CAAC;YACjD,CAAC,CAAC,CAAC,GAAG,OAAO,EAAE,EAAE,CAAC,CACzB,CAAC,CAAC;IACP,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,yBAAyB,IAAC,SAAS,EAAE,IAAI,CAAC,4BAA4B,CAAC,IAAI,EAAE,SAAS,CAAC,YACnF,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACnB,KAAC,uBAAuB,IAEpB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,eAAe,EAChC,iBAAiB,EAAE,oBAAoB,EACvC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,GAAI,CAAC,CAAC,CAAC,SAAS,IAL/D,KAAK,CAAC,GAAG,CAMhB,CACL,CAAC,GACsB,CAC/B,CAAC;AACN,CAAC,CAAC"}

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

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import type { ActorExampleSchemaFieldSerialized } from '@apify-packages/types';
+export declare const actorExampleSchemaFieldClassNames: {
+    FIELD: string;
+    CHILDREN: string;
+};
+type Props = {
+    field: ActorExampleSchemaFieldSerialized;
+    collapsedFields: string[];
+    canCollapse?: boolean;
+    onToggleCollapsed: (id: string) => void;
+    depth?: number;
+    className?: string;
+    /** Slot rendered on the outer property only — nested children render plain. */
+    leadingSlot?: ReactNode;
+};
+export declare const ActorExampleSchemaField: ({ field, collapsedFields, canCollapse, onToggleCollapsed, depth, className, leadingSlot, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=actor_example_schema_field.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"actor_example_schema_field.d.ts","sourceRoot":"","sources":["../../../../src/components/actor_example/actor_example_schema_field.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,uBAAuB,CAAC;AAK/E,eAAO,MAAM,iCAAiC;;;CAG7C,CAAC;AAmBF,KAAK,KAAK,GAAG;IACT,KAAK,EAAE,iCAAiC,CAAC;IACzC,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,SAAS,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,4FAQrC,KAAK,4CAiCP,CAAC"}

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import styled from 'styled-components';
+import { theme } from '../../design_system/theme.js';
+import { ActorExampleSchemaProperty } from './actor_example_schema_property.js';
+export const actorExampleSchemaFieldClassNames = {
+    FIELD: 'actor-example-schema-field',
+    CHILDREN: 'actor-example-schema-field__children',
+};
+const ActorExampleSchemaFieldWrapper = styled.div `
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.space.space8};
+
+    .${actorExampleSchemaFieldClassNames.CHILDREN} {
+        margin-left: ${({ $canCollapse }) => ($canCollapse ? '5.6rem' : '2.8rem')};
+        padding-left: 0.8rem;
+        display: flex;
+        flex-direction: column;
+        gap: ${theme.space.space8};
+        border-left: 1px solid ${theme.color.neutral.border};
+    }
+`;
+const MAX_SCHEMA_FIELD_DEPTH = 1;
+export const ActorExampleSchemaField = ({ field, collapsedFields, canCollapse = false, onToggleCollapsed, depth = 0, className, leadingSlot, }) => {
+    const subfields = field.properties ?? field.items ?? [];
+    const isCollapsed = collapsedFields.includes(field._id);
+    if (subfields.length === 0 || depth >= MAX_SCHEMA_FIELD_DEPTH) {
+        return _jsx(ActorExampleSchemaProperty, { ...field, className: className, leadingSlot: leadingSlot });
+    }
+    return (_jsxs(ActorExampleSchemaFieldWrapper, { "$canCollapse": canCollapse, className: clsx(actorExampleSchemaFieldClassNames.FIELD, className), children: [_jsx(ActorExampleSchemaProperty, { ...field, isCollapsable: canCollapse, isCollapsed: isCollapsed, onToggleCollapsed: onToggleCollapsed, leadingSlot: leadingSlot }), !isCollapsed && (_jsx("div", { className: actorExampleSchemaFieldClassNames.CHILDREN, children: subfields.map((subfield) => (_jsx(ActorExampleSchemaField, { field: subfield, collapsedFields: collapsedFields, canCollapse: canCollapse, onToggleCollapsed: onToggleCollapsed, depth: depth + 1 }, subfield._id))) }))] }));
+};
+//# sourceMappingURL=actor_example_schema_field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"actor_example_schema_field.js","sourceRoot":"","sources":["../../../../src/components/actor_example/actor_example_schema_field.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAIvC,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAEhF,MAAM,CAAC,MAAM,iCAAiC,GAAG;IAC7C,KAAK,EAAE,4BAA4B;IACnC,QAAQ,EAAE,sCAAsC;CACnD,CAAC;AAEF,MAAM,8BAA8B,GAAG,MAAM,CAAC,GAAG,CAA2B;;;WAGjE,KAAK,CAAC,KAAK,CAAC,MAAM;;OAEtB,iCAAiC,CAAC,QAAQ;uBAC1B,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC;;;;eAIlE,KAAK,CAAC,KAAK,CAAC,MAAM;iCACA,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM;;CAE1D,CAAC;AAEF,MAAM,sBAAsB,GAAG,CAAC,CAAC;AAajC,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EACpC,KAAK,EACL,eAAe,EACf,WAAW,GAAG,KAAK,EACnB,iBAAiB,EACjB,KAAK,GAAG,CAAC,EACT,SAAS,EACT,WAAW,GACP,EAAE,EAAE;IACR,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;IACxD,MAAM,WAAW,GAAG,eAAe,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAExD,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,IAAI,sBAAsB,EAAE,CAAC;QAC5D,OAAO,KAAC,0BAA0B,OAAK,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,GAAI,CAAC;IACrG,CAAC;IAED,OAAO,CACH,MAAC,8BAA8B,oBAAe,WAAW,EAAE,SAAS,EAAE,IAAI,CAAC,iCAAiC,CAAC,KAAK,EAAE,SAAS,CAAC,aAC1H,KAAC,0BAA0B,OACnB,KAAK,EACT,aAAa,EAAE,WAAW,EAC1B,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,WAAW,GAC1B,EACD,CAAC,WAAW,IAAI,CACb,cAAK,SAAS,EAAE,iCAAiC,CAAC,QAAQ,YACrD,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACzB,KAAC,uBAAuB,IAEpB,KAAK,EAAE,QAAQ,EACf,eAAe,EAAE,eAAe,EAChC,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,KAAK,EAAE,KAAK,GAAG,CAAC,IALX,QAAQ,CAAC,GAAG,CAMnB,CACL,CAAC,GACA,CACT,IAC4B,CACpC,CAAC;AACN,CAAC,CAAC"}

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

@@ -0,0 +1,9 @@
+import type { ActorExampleSchemaFieldType } from '@apify-packages/types';
+type Props = {
+    type?: ActorExampleSchemaFieldType;
+    title: string;
+    className?: string;
+};
+export declare const ActorExampleSchemaFieldBadge: ({ type, title, className }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=actor_example_schema_field_badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"actor_example_schema_field_badge.d.ts","sourceRoot":"","sources":["../../../../src/components/actor_example/actor_example_schema_field_badge.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,uBAAuB,CAAC;AA6CzE,KAAK,KAAK,GAAG;IACT,IAAI,CAAC,EAAE,2BAA2B,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,4BAA4B,KAAK,4CAQ7E,CAAC"}

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

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { theme } from '../../design_system/theme.js';
+import { actorExampleSchemaPropertyDefaultIcon, actorExampleSchemaPropertyMap } from './actor_example.utils.js';
+// Per-type colour variables consumed via `var(--actor-schema-field-*)` in `actor_example.utils.ts`.
+// Declared on this wrapper itself (rather than `:root`) so the badge is self-contained — no
+// host-app globals required. Dark-mode overrides hook into the existing `html[data-theme='dark']`
+// theming switch via a parent-selector cascade.
+const ActorExampleSchemaFieldBadgeWrapper = styled.div `
+    --actor-schema-field-string-text: #018181;
+    --actor-schema-field-string-background: #EBFBF8;
+    --actor-schema-field-number-text: #8C4E02;
+    --actor-schema-field-number-background: #F9F0DB;
+    --actor-schema-field-boolean-text: #104B37;
+    --actor-schema-field-boolean-background: #DFFFF0;
+    --actor-schema-field-object-text: #4C41C0;
+    --actor-schema-field-object-background: #E8E6F9;
+    --actor-schema-field-array-text: #0043CA;
+    --actor-schema-field-array-background: #E0EBFF;
+
+    html[data-theme='dark'] & {
+        --actor-schema-field-string-text: #84F5E5;
+        --actor-schema-field-string-background: #0F2E2A;
+        --actor-schema-field-number-text: #FFD761;
+        --actor-schema-field-number-background: #5D2E0E;
+        --actor-schema-field-boolean-text: #A3E8CF;
+        --actor-schema-field-boolean-background: #0B3225;
+        --actor-schema-field-object-text: #A08CF2;
+        --actor-schema-field-object-background: #2A2544;
+        --actor-schema-field-array-text: #97BCFF;
+        --actor-schema-field-array-background: #152447;
+    }
+
+    width: 2rem;
+    height: 2rem;
+    color: ${({ $type }) => ($type ? actorExampleSchemaPropertyMap[$type].textColor : theme.color.neutral.text)};
+    background-color: ${({ $type }) => ($type ? actorExampleSchemaPropertyMap[$type].backgroundColor : theme.color.neutral.backgroundSubtle)};
+    border-radius: ${theme.radius.radius4};
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+`;
+export const ActorExampleSchemaFieldBadge = ({ type, title, className }) => {
+    const Icon = (type ? actorExampleSchemaPropertyMap[type]?.Icon : undefined) ?? actorExampleSchemaPropertyDefaultIcon;
+    return (_jsx(ActorExampleSchemaFieldBadgeWrapper, { "$type": type, className: className, children: _jsx(Icon, { size: '12', title: title }) }));
+};
+//# sourceMappingURL=actor_example_schema_field_badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"actor_example_schema_field_badge.js","sourceRoot":"","sources":["../../../../src/components/actor_example/actor_example_schema_field_badge.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAMvC,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,qCAAqC,EAAE,6BAA6B,EAAE,MAAM,0BAA0B,CAAC;AAEhH,oGAAoG;AACpG,4FAA4F;AAC5F,kGAAkG;AAClG,gDAAgD;AAChD,MAAM,mCAAmC,GAAG,MAAM,CAAC,GAAG,CAAyC;;;;;;;;;;;;;;;;;;;;;;;;;;;aA2BlF,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,6BAA6B,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;wBACvF,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,6BAA6B,CAAC,KAAK,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC;qBACvH,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;CAKxC,CAAC;AAQF,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAS,EAAE,EAAE;IAC9E,MAAM,IAAI,GAAkB,CAAC,IAAI,CAAC,CAAC,CAAC,6BAA6B,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,qCAAqC,CAAC;IAEpI,OAAO,CACH,KAAC,mCAAmC,aAAQ,IAAI,EAAE,SAAS,EAAE,SAAS,YAClE,KAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,KAAK,GAAI,GACE,CACzC,CAAC;AACN,CAAC,CAAC"}

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

@@ -0,0 +1,10 @@
+export declare const actorExampleSchemaLegendClassNames: {
+    ROOT: string;
+    ITEM: string;
+};
+type Props = {
+    className?: string;
+};
+export declare const ActorExampleSchemaLegend: ({ className }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=actor_example_schema_legend.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"actor_example_schema_legend.d.ts","sourceRoot":"","sources":["../../../../src/components/actor_example/actor_example_schema_legend.tsx"],"names":[],"mappings":"AAYA,eAAO,MAAM,kCAAkC;;;CAG9C,CAAC;AAeF,KAAK,KAAK,GAAG;IACT,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,wBAAwB,GAAI,eAAe,KAAK,4CAY5D,CAAC"}

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import styled from 'styled-components';
+import { theme } from '../../design_system/theme.js';
+import { Text } from '../text/index.js';
+import { actorExampleSchemaPropertyMap } from './actor_example.utils.js';
+import { ActorExampleSchemaFieldBadge } from './actor_example_schema_field_badge.js';
+const LEGEND_TYPE_ORDER = ['string', 'number', 'boolean', 'array', 'object'];
+export const actorExampleSchemaLegendClassNames = {
+    ROOT: 'actor-example-schema-legend',
+    ITEM: 'actor-example-schema-legend__item',
+};
+const ActorExampleSchemaLegendWrapper = styled.div `
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: ${theme.space.space12};
+
+    .${actorExampleSchemaLegendClassNames.ITEM} {
+        display: inline-flex;
+        align-items: center;
+        gap: ${theme.space.space4};
+    }
+`;
+export const ActorExampleSchemaLegend = ({ className }) => (_jsx(ActorExampleSchemaLegendWrapper, { className: clsx(actorExampleSchemaLegendClassNames.ROOT, className), children: LEGEND_TYPE_ORDER.map((type) => {
+        const config = actorExampleSchemaPropertyMap[type];
+        return (_jsxs("span", { className: actorExampleSchemaLegendClassNames.ITEM, children: [_jsx(ActorExampleSchemaFieldBadge, { type: type, title: config.title }), _jsx(Text, { as: 'span', size: 'small', weight: 'medium', children: config.title })] }, type));
+    }) }));
+//# sourceMappingURL=actor_example_schema_legend.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"actor_example_schema_legend.js","sourceRoot":"","sources":["../../../../src/components/actor_example/actor_example_schema_legend.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAIvC,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,6BAA6B,EAAE,MAAM,0BAA0B,CAAC;AACzE,OAAO,EAAE,4BAA4B,EAAE,MAAM,uCAAuC,CAAC;AAErF,MAAM,iBAAiB,GAAkC,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC;AAE5G,MAAM,CAAC,MAAM,kCAAkC,GAAG;IAC9C,IAAI,EAAE,6BAA6B;IACnC,IAAI,EAAE,mCAAmC;CAC5C,CAAC;AAEF,MAAM,+BAA+B,GAAG,MAAM,CAAC,GAAG,CAAA;;;;WAIvC,KAAK,CAAC,KAAK,CAAC,OAAO;;OAEvB,kCAAkC,CAAC,IAAI;;;eAG/B,KAAK,CAAC,KAAK,CAAC,MAAM;;CAEhC,CAAC;AAMF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EAAE,SAAS,EAAS,EAAE,EAAE,CAAC,CAC9D,KAAC,+BAA+B,IAAC,SAAS,EAAE,IAAI,CAAC,kCAAkC,CAAC,IAAI,EAAE,SAAS,CAAC,YAC/F,iBAAiB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QAC5B,MAAM,MAAM,GAAG,6BAA6B,CAAC,IAAI,CAAC,CAAC;QACnD,OAAO,CACH,gBAAiB,SAAS,EAAE,kCAAkC,CAAC,IAAI,aAC/D,KAAC,4BAA4B,IAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,GAAI,EACjE,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,MAAM,EAAC,QAAQ,YAAE,MAAM,CAAC,KAAK,GAAQ,KAF3D,IAAI,CAGR,CACV,CAAC;IACN,CAAC,CAAC,GAC4B,CACrC,CAAC"}