@apify/ui-library 1.148.0 → 1.148.1-featuremigrateapifyuilibrary-48563e.21

package/dist/type_utils.d.ts

@@ -0,0 +1,6 @@
+export type WithTransientProps<T> = {
+    [P in keyof T & string as `$${P}`]: T[P];
+};
+export type WithRequired<T, K extends keyof T> = T & Required<Pick<T, K>>;
+export type WithOptional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+//# sourceMappingURL=type_utils.d.ts.map

package/dist/type_utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type_utils.d.ts","sourceRoot":"","sources":["../src/type_utils.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,kBAAkB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,MAAM,IAAI,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;CAAE,CAAC;AAEjF,MAAM,MAAM,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAC1E,MAAM,MAAM,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC"}

package/dist/ui_dependency_provider.d.ts

@@ -0,0 +1,31 @@
+import { default as React, ReactNode } from 'react';
+import { UiThemeOption } from './design_system/theme';
+export interface AgnosticInternalLinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+    replace?: boolean;
+    href: string;
+}
+export type ImageProxyOptions = {
+    extension?: string;
+    resize?: {
+        width?: number;
+        height?: number;
+    };
+};
+export interface UiDependencies {
+    InternalLink: React.ForwardRefExoticComponent<AgnosticInternalLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+    InternalImage: React.ForwardRefExoticComponent<React.RefAttributes<HTMLImageElement>>;
+    trackClick?: (id: string, data?: object) => void;
+    windowLocationHost: string;
+    isHrefTrusted: (href: string) => boolean;
+    uiTheme?: UiThemeOption;
+    generateProxyImageUrl?: (url: string, options: ImageProxyOptions) => string;
+    tooltipSafeHtml: (content: ReactNode) => ReactNode;
+}
+interface UiDependencyProviderProps {
+    children: React.ReactNode;
+    dependencies: UiDependencies;
+}
+export declare const useSharedUiDependencies: () => UiDependencies;
+export declare const UiDependencyProvider: React.FC<UiDependencyProviderProps>;
+export {};
+//# sourceMappingURL=ui_dependency_provider.d.ts.map

package/dist/ui_dependency_provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui_dependency_provider.d.ts","sourceRoot":"","sources":["../src/ui_dependency_provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,MAAM,WAAW,yBAA0B,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAI1G,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;KACnB,CAAC;CACL,CAAC;AAEF,MAAM,WAAW,cAAc;IAC3B,YAAY,EAAE,KAAK,CAAC,yBAAyB,CAAC,yBAAyB,GAAG,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAClH,aAAa,EAAE,KAAK,CAAC,yBAAyB,CAAC,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAGtF,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjD,kBAAkB,EAAE,MAAM,CAAC;IAE3B,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;IACzC,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB,qBAAqB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,iBAAiB,KAAK,MAAM,CAAC;IAE5E,eAAe,EAAE,CAAC,OAAO,EAAE,SAAS,KAAK,SAAS,CAAC;CACtD;AAED,UAAU,yBAAyB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,EAAE,cAAc,CAAC;CAChC;AAID,eAAO,MAAM,uBAAuB,sBAInC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAEpE,CAAC"}

package/dist/ui_dependency_provider.js

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui_dependency_provider.tsx
+var DependencyProviderContext = createContext(null);
+var useSharedUiDependencies = () => {
+	const uiDependencies = useContext(DependencyProviderContext);
+	if (!uiDependencies) throw new Error("Application must be wrapped by UiDependencyProvider");
+	return uiDependencies;
+};
+var UiDependencyProvider = ({ children, dependencies }) => {
+	return /* @__PURE__ */ jsx(DependencyProviderContext.Provider, {
+		value: dependencies,
+		children
+	});
+};
+//#endregion
+export { UiDependencyProvider, useSharedUiDependencies };

package/dist/utils/copy_to_clipboard.d.ts

@@ -0,0 +1,7 @@
+interface UseCopyToClipboard {
+    isCopied: boolean;
+    copyToClipboard(textToCopy: string): Promise<void>;
+}
+export declare function useCopyToClipboard(timeoutMs?: number): UseCopyToClipboard;
+export {};
+//# sourceMappingURL=copy_to_clipboard.d.ts.map

package/dist/utils/copy_to_clipboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy_to_clipboard.d.ts","sourceRoot":"","sources":["../../src/utils/copy_to_clipboard.ts"],"names":[],"mappings":"AAEA,UAAU,kBAAkB;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACtD;AAED,wBAAgB,kBAAkB,CAAC,SAAS,SAAO,GAAG,kBAAkB,CAyBvE"}

package/dist/utils/copy_to_clipboard.js

@@ -0,0 +1,27 @@
+import { useEffect, useRef, useState } from "react";
+//#region src/utils/copy_to_clipboard.ts
+function useCopyToClipboard(timeoutMs = 1e3) {
+	const timeoutRef = useRef(null);
+	const [isCopied, setIsCopied] = useState(false);
+	async function copyToClipboard(textToCopy) {
+		await navigator.clipboard.writeText(textToCopy);
+		setIsCopied(true);
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		timeoutRef.current = setTimeout(() => {
+			setIsCopied(false);
+			timeoutRef.current = null;
+		}, timeoutMs);
+	}
+	useEffect(() => {
+		return () => {
+			if (!timeoutRef.current) return;
+			clearTimeout(timeoutRef.current);
+		};
+	}, []);
+	return {
+		copyToClipboard,
+		isCopied
+	};
+}
+//#endregion
+export { useCopyToClipboard };

package/dist/utils/css_utils.d.ts

@@ -0,0 +1,24 @@
+/**
+ * To be used in any styled-component styles to limit the number of visible lines of a given text
+ * @param nLines number of lines to show
+ * @returns css rules to clamp the lines of any text at the given nLines
+ */
+export declare function clampLines(nLines: number): import('styled-components').RuleSet<object>;
+export type DeviceBreakpoints = 'mobile' | 'tablet' | 'desktop' | 'mediumDesktop' | 'largeDesktop' | 'xLargeDesktop';
+export type ResponsiveValue<T> = T | {
+    [key in DeviceBreakpoints]?: T;
+};
+export declare const isResponsiveObject: <T>(value?: ResponsiveValue<T>) => value is { [key in DeviceBreakpoints]?: T; };
+export declare const getResponsiveValueAtBreakpoint: <T>(value: ResponsiveValue<T> | undefined, breakpoint: DeviceBreakpoints) => T | undefined;
+/**
+ * Use this when a CSS property can be either a single value or different values per breakpoint.
+ * Pass the property name, a function that turns the input into a CSS value, and optionally fallback values to use
+ * when the main value is not provided (margin bottom can for example be specified by mb, my, m).
+ * @param cssProperty CSS property name to generate
+ * @param resolver converts the input value into a CSS value ('space16' => '16px')
+ * @param value single value or breakpoint-based values for the property
+ * @param fallbackValues values checked in order when `value` is missing
+ * @returns generated responsive styles, or `undefined` when there is nothing to output
+ */
+export declare const getResponsiveStyles: <T>(cssProperty: string, resolver: (value: T) => string | number, value?: ResponsiveValue<T>, fallbackValues?: ResponsiveValue<T>[]) => import('styled-components').RuleSet<object> | undefined;
+//# sourceMappingURL=css_utils.d.ts.map

package/dist/utils/css_utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css_utils.d.ts","sourceRoot":"","sources":["../../src/utils/css_utils.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,MAAM,+CASxC;AAED,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,eAAe,GAAG,cAAc,GAAG,eAAe,CAAC;AAGrH,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,CAAC,GAAG;KAAG,GAAG,IAAI,iBAAiB,CAAC,CAAC,EAAE,CAAC;CAAE,CAAC;AAYxE,eAAO,MAAM,kBAAkB,GAAI,CAAC,EAAE,QAAQ,eAAe,CAAC,CAAC,CAAC,KAAG,KAAK,IAAI,GAAG,GAAG,IAAI,iBAAiB,CAAC,CAAC,EAAE,CAAC,GAC7D,CAAC;AAEhD,eAAO,MAAM,8BAA8B,GAAI,CAAC,EAC5C,OAAO,eAAe,CAAC,CAAC,CAAC,GAAG,SAAS,EACrC,YAAY,iBAAiB,kBAIhC,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,mBAAmB,GAAI,CAAC,EACjC,aAAa,MAAM,EACnB,UAAU,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,GAAG,MAAM,EACvC,QAAQ,eAAe,CAAC,CAAC,CAAC,EAC1B,iBAAgB,eAAe,CAAC,CAAC,CAAC,EAAO,4DAmC5C,CAAC"}

package/dist/utils/css_utils.js

@@ -0,0 +1,62 @@
+import { theme } from "../design_system/theme.js";
+import { css } from "styled-components";
+//#region src/utils/css_utils.ts
+/**
+* To be used in any styled-component styles to limit the number of visible lines of a given text
+* @param nLines number of lines to show
+* @returns css rules to clamp the lines of any text at the given nLines
+*/
+function clampLines(nLines) {
+	return css`
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: ${nLines};
+        line-clamp: ${nLines};
+        -webkit-box-orient: vertical;
+    `;
+}
+var responsiveBreakpoints = ["mobile", ...[
+	"tablet",
+	"desktop",
+	"mediumDesktop",
+	"largeDesktop",
+	"xLargeDesktop"
+]];
+var isResponsiveObject = (value) => typeof value === "object" && value !== null;
+var getResponsiveValueAtBreakpoint = (value, breakpoint) => {
+	if (isResponsiveObject(value)) return value[breakpoint];
+	return value;
+};
+/**
+* Use this when a CSS property can be either a single value or different values per breakpoint.
+* Pass the property name, a function that turns the input into a CSS value, and optionally fallback values to use
+* when the main value is not provided (margin bottom can for example be specified by mb, my, m).
+* @param cssProperty CSS property name to generate
+* @param resolver converts the input value into a CSS value ('space16' => '16px')
+* @param value single value or breakpoint-based values for the property
+* @param fallbackValues values checked in order when `value` is missing
+* @returns generated responsive styles, or `undefined` when there is nothing to output
+*/
+var getResponsiveStyles = (cssProperty, resolver, value, fallbackValues = []) => {
+	const resolvedValue = value ?? fallbackValues.find((fallbackValue) => fallbackValue !== void 0);
+	if (resolvedValue === void 0) return;
+	if (!isResponsiveObject(resolvedValue)) return css`
+            ${cssProperty}: ${resolver(resolvedValue)};
+        `;
+	const styleBlocks = responsiveBreakpoints.map((breakpoint) => {
+		const nextValue = getResponsiveValueAtBreakpoint(resolvedValue, breakpoint);
+		if (nextValue === void 0) return false;
+		const declaration = css`
+                ${cssProperty}: ${resolver(nextValue)};
+            `;
+		return breakpoint === "mobile" ? declaration : css`
+                      @media ${theme.device[breakpoint]} {
+                          ${declaration}
+                      }
+                  `;
+	}).filter(Boolean);
+	return styleBlocks.length > 0 ? styleBlocks : void 0;
+};
+//#endregion
+export { clampLines, getResponsiveStyles, getResponsiveValueAtBreakpoint, isResponsiveObject };

package/dist/utils/image_color.d.ts

@@ -0,0 +1,7 @@
+import { FastAverageColorResult } from 'fast-average-color';
+import { RefCallback } from 'react';
+export declare const useImageColor: () => {
+    color: FastAverageColorResult | undefined;
+    refCallback: RefCallback<HTMLImageElement>;
+};
+//# sourceMappingURL=image_color.d.ts.map

package/dist/utils/image_color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image_color.d.ts","sourceRoot":"","sources":["../../src/utils/image_color.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAEjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAmBzC,eAAO,MAAM,aAAa;;;CAqBzB,CAAC"}

package/dist/utils/image_color.js

@@ -0,0 +1,31 @@
+import { useCallback, useState } from "react";
+import { FastAverageColor } from "fast-average-color";
+//#region src/utils/image_color.ts
+var isDark = (rgb) => {
+	return (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1e3 < 200;
+};
+var patchDarknessInfo = (color) => ({
+	...color,
+	isDark: isDark(color.value),
+	isLight: !isDark(color.value)
+});
+var fac = new FastAverageColor();
+var useImageColor = () => {
+	const [color, setColor] = useState();
+	return {
+		color,
+		refCallback: useCallback((element) => {
+			const updateColor = async () => {
+				if (!element) return;
+				try {
+					setColor(patchDarknessInfo(await fac.getColorAsync(element)));
+				} catch (error) {
+					console.error("Failed to determine the image color.", { error });
+				}
+			};
+			updateColor();
+		}, [])
+	};
+};
+//#endregion
+export { useImageColor };

package/dist/utils/index.d.ts

@@ -0,0 +1,7 @@
+export * from './copy_to_clipboard';
+export * from './sanitization';
+export * from './image_color';
+export * from './resize_observer';
+export * from './css_utils';
+export * from './type_utils';
+//# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/dist/utils/resize_observer.d.ts

@@ -0,0 +1,3 @@
+import { UseResizeObserverCallback } from '@react-hook/resize-observer';
+export declare const useResizeObserverSsr: <T extends Element>(target: React.RefObject<T> | React.ForwardedRef<T> | T | null, callback: UseResizeObserverCallback) => ResizeObserver;
+//# sourceMappingURL=resize_observer.d.ts.map

package/dist/utils/resize_observer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize_observer.d.ts","sourceRoot":"","sources":["../../src/utils/resize_observer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAS7E,eAAO,MAAM,oBAAoB,GAAI,CAAC,SAAS,OAAO,EAClD,QAAQ,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,EAC7D,UAAU,yBAAyB,mBAKtC,CAAC"}

package/dist/utils/resize_observer.js

@@ -0,0 +1,12 @@
+import useResizeObserver from "@react-hook/resize-observer";
+//#region src/utils/resize_observer.ts
+var ServerSideResizeObserverPolyfill = class {
+	constructor(callback) {}
+	observe(target, options) {}
+	unobserve(target) {}
+};
+var useResizeObserverSsr = (target, callback) => {
+	return useResizeObserver(target, callback, { polyfill: typeof window === "undefined" ? ServerSideResizeObserverPolyfill : null });
+};
+//#endregion
+export { useResizeObserverSsr };

package/dist/utils/sanitization.d.ts

@@ -0,0 +1,11 @@
+/**
+ * This utility function sanitizes a URL by parsing it and returning the string representation of the URL.
+ * This removed any UTF-8 characters and replaces them with their ASCII equivalents. This is needed because
+ * otherwise users can use UTF-8 characters to obfuscate URLs and make them look like legitimate URLs.
+ *
+ * @param url URL to sanitize
+ * @returns Sanitized URL or empty string if URL is not a string
+ * @throws Error if URL is not valid
+ */
+export declare const sanitizeUrl: (url: string) => string;
+//# sourceMappingURL=sanitization.d.ts.map

package/dist/utils/sanitization.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sanitization.d.ts","sourceRoot":"","sources":["../../src/utils/sanitization.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,WAItC,CAAC"}

package/dist/utils/sanitization.js

@@ -0,0 +1,16 @@
+//#region src/utils/sanitization.ts
+/**
+* This utility function sanitizes a URL by parsing it and returning the string representation of the URL.
+* This removed any UTF-8 characters and replaces them with their ASCII equivalents. This is needed because
+* otherwise users can use UTF-8 characters to obfuscate URLs and make them look like legitimate URLs.
+*
+* @param url URL to sanitize
+* @returns Sanitized URL or empty string if URL is not a string
+* @throws Error if URL is not valid
+*/
+var sanitizeUrl = (url) => {
+	if (typeof url !== "string") return "";
+	return new URL(url).toString();
+};
+//#endregion
+export { sanitizeUrl };

package/dist/utils/type_utils.d.ts

@@ -0,0 +1,3 @@
+import { css } from 'styled-components';
+export type FlattenSimpleInterpolation = ReturnType<typeof css>;
+//# sourceMappingURL=type_utils.d.ts.map

package/dist/utils/type_utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type_utils.d.ts","sourceRoot":"","sources":["../../src/utils/type_utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,MAAM,0BAA0B,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC"}

package/package.json

@@ -1,11 +1,12 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.148.0",
+    "version": "1.148.1-featuremigrateapifyuilibrary-48563e.21+34b5b1cc5c9",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
-    "main": "dist/src/index.js",
-    "types": "dist/src/index.d.ts",
+    "sideEffects": false,
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
     "publishConfig": {
         "registry": "https://registry.npmjs.org",
         "access": "public"
@@ -15,10 +16,11 @@
         "test:watch": "vitest watch",
         "lint": "oxlint --type-aware .",
         "lint:fix": "oxlint --type-aware --fix .",
-        "build": "pnpm run clean && pnpm run compile",
+        "build": "pnpm run clean && pnpm run compile && ./scripts/save_current_files_hash.sh",
+        "rebuild-if-needed": "./scripts/rebuild_if_needed.sh",
         "clean": "rimraf ./dist",
-        "compile": "tsc -p tsconfig.build.json",
-        "type-check": "tsc --noEmit",
+        "compile": "vite build",
+        "type-check": "tsc --noEmit -p tsconfig.build.json",
         "generate-theme": "node src/codemods/generate_typograpy_tokens_files.mjs  && pnpm run lint:fix",
         "build-color-tokens": "node src/design_system/colors/build_color_tokens.js",
         "postpublish": "rimraf ./dist"
@@ -67,16 +69,19 @@
         "@types/hast": "^3.0.4",
         "@types/lodash": "^4.14.200",
         "@types/react": "19.2.2",
+        "@vitejs/plugin-react-swc": "^4.3.1",
         "jest-styled-components": "^7.4.0",
         "jsdom": "^29.1.1",
         "recast": "^0.23.9",
         "style-dictionary": "^4.4.0",
-        "styled-components": "^6.1.19"
+        "styled-components": "^6.1.19",
+        "vite": "^8.0.14",
+        "vite-plugin-dts": "^5.0.1"
     },
     "files": [
         "dist",
         "src",
         "style"
     ],
-    "gitHead": "6fd25217081b1b881c4b7cdb81d09511e5b909e7"
+    "gitHead": "34b5b1cc5c9e0570349ee50a1dc40762fe2fe170"
 }

package/src/components/action_link/action_link.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import type { ComponentProps } from 'react';
 
-import { ActionLink, BackLink } from './action_link.js';
+import { ActionLink, BackLink } from './action_link';
 
 type ActionLinkProps = ComponentProps<typeof ActionLink>;
 type BackLinkProps = ComponentProps<typeof BackLink>;

package/src/components/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/index.js';
-import { Link, type LinkProps, StyledAsLink } from '../link/index.js';
-import { Heading } from '../text/index.js';
+import { theme } from '../../design_system/theme';
+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

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

package/src/components/actor_template_card/actor_template_card.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import type React from 'react';
 
-import { ActorTemplateCard } from './actor_template_card.js';
+import { ActorTemplateCard } from './actor_template_card';
 
 // Define the props interface for the component
 interface ActorTemplateCardProps {

package/src/components/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/index.js';
-import { TextMarketing } from '../text/index.js';
-import { VerticalTile } from '../tile/index.js';
+import { theme } from '../../design_system/theme';
+import { Badge } from '../badge';
+import { TextMarketing } from '../text';
+import { VerticalTile } from '../tile';
 
 interface ActorTemplateCardProps {
     id: string;

package/src/components/actor_template_card/index.ts

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

package/src/components/avatar/actor_avatar.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { ActorAvatar } from './actor_avatar.js';
+import { ActorAvatar } from './actor_avatar';
 
 const meta = {
     title: 'UI-Library/Avatar/ActorAvatar',

package/src/components/avatar/actor_avatar.tsx

@@ -3,10 +3,10 @@ import type { FC, RefCallback } from 'react';
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 
-import { theme } from '../../design_system/theme.js';
-import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
-import { useImageColor } from '../../utils/image_color.js';
-import { BoringAvatarMarble } from './boring_avatar.js';
+import { theme } from '../../design_system/theme';
+import { useSharedUiDependencies } from '../../ui_dependency_provider';
+import { useImageColor } from '../../utils/image_color';
+import { BoringAvatarMarble } from './boring_avatar';
 
 export const actorAvatarClassnames = {
     BASE: 'ActorAvatar',

package/src/components/avatar/index.ts

@@ -1,2 +1,2 @@
-export * from './actor_avatar.js';
-export * from './user_avatar.js';
+export * from './actor_avatar';
+export * from './user_avatar';

package/src/components/avatar/user_avatar.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 import styled from 'styled-components';
 
-import { UserAvatar } from './user_avatar.js';
+import { UserAvatar } from './user_avatar';
 
 const meta = {
     title: 'UI-Library/Avatar/UserAvatar',

package/src/components/avatar/user_avatar.tsx

@@ -3,9 +3,9 @@ import type { FC } from 'react';
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
 
-import { theme } from '../../design_system/theme.js';
-import { useSharedUiDependencies } from '../../ui_dependency_provider.js';
-import { BoringAvatarSolid } from './boring_avatar.js';
+import { theme } from '../../design_system/theme';
+import { useSharedUiDependencies } from '../../ui_dependency_provider';
+import { BoringAvatarSolid } from './boring_avatar';
 
 const DEFAULT_USER_PICTURE_URL = 'https://cdn.apify.com/img/icons/anonymous_user_picture.png';
 const DEFAULT_ORGANIZATION_PICTURE_URL = 'https://cdn.apify.com/img/icons/anonymous_organization_picture.png';

package/src/components/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 { theme } from '../../design_system/theme';
 import type { WithTransientProps } from '../../type_utils';
 import type { FlattenSimpleInterpolation } from '../../utils/type_utils';
-import { Box, type MarginSpacingProps, type RegularBoxProps } from '../box/index.js';
+import { Box, type MarginSpacingProps, type RegularBoxProps } from '../box';
 import type { SharedTextSize, SharedTextType } from '../text';
-import { Text } from '../text/index.js';
+import { Text } 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

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

package/src/components/banner/banner.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import type React from 'react';
 
-import { Banner } from './banner.js';
+import { Banner } from './banner';
 
 interface BannerProps {
     background?: string;

package/src/components/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';
 
 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

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

package/src/components/blog_article/blog_article.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import type { ComponentProps } from 'react';
 
-import { BlogArticle } from './blog_article.js';
+import { BlogArticle } from './blog_article';
 
 type BlogArticleProps = ComponentProps<typeof BlogArticle>;
 

package/src/components/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';
 
 const classNames = {
     IMAGE_WRAPPER: 'ImageWrapper',

package/src/components/blog_article/index.ts

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

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Box } from './box.js';
+import { Box } from './box';
 
 const meta: Meta<typeof Box> = {
     title: 'UI-Library/Box',

package/src/components/box/box.tsx

@@ -2,10 +2,10 @@ import type React from 'react';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 
-import { theme } from '../../design_system/theme.js';
+import { theme } from '../../design_system/theme';
 import type { Size } from '../../design_system/tokens';
 import type { WithTransientProps } from '../../type_utils';
-import { getResponsiveStyles, type ResponsiveValue } from '../../utils/css_utils.js';
+import { getResponsiveStyles, type ResponsiveValue } from '../../utils/css_utils';
 
 type ExtendedSize = Size | 'none' | 'auto';
 

package/src/components/box/index.ts

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

package/src/components/breadcrumb/breadcrumb.stories.tsx

@@ -1,7 +1,7 @@
 import type { StoryObj } from '@storybook/react-vite';
 import { userEvent, within } from 'storybook/test';
 
-import { Breadcrumbs } from './breadcrumb.js';
+import { Breadcrumbs } from './breadcrumb';
 
 type Story = StoryObj<typeof Breadcrumbs>;
 

package/src/components/breadcrumb/breadcrumb.tsx

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

package/src/components/breadcrumb/index.ts

@@ -1 +1 @@
-export * from './breadcrumb.js';
+export * from './breadcrumb';