@apify/ui-library 0.51.6-featurepublishuilibrary-0a4729.38266

package/src/design_system/tokens/layouts.ts

@@ -0,0 +1,29 @@
+/**
+ * Layouts (device screen size) tokens - used for media queries.
+ * Defined in px as we need to know exact size of the screen.
+ * @typedef {Object} Screen
+ * @property {'768px'} tablet
+ * @property {'1024px'} desktop
+ * @property {'1200px'} mediumDesktop
+ * @property {'1440px'} largeDesktop
+ */
+/**
+ * @type {Screen}
+ * @deprecated - use the 'device' value instead - it includes the `(min-width: xxx)` part
+ */
+export const layouts = {
+    tablet: '768px',
+    desktop: '1024px',
+    mediumDesktop: '1200px',
+    largeDesktop: '1440px',
+} as const;
+
+/**
+ * @type {Screen}
+ */
+export const devices = {
+    tablet: '(min-width: 768px)',
+    desktop: '(min-width: 1024px)',
+    mediumDesktop: '(min-width: 1200px)',
+    largeDesktop: '(min-width: 1440px)',
+} as const;

package/src/design_system/tokens/radiuses.ts

@@ -0,0 +1,22 @@
+/**
+ * Radius tokens - used for border radius.
+ * Needs to be defined in px as we don't want to scale it with font size.
+ * @typedef {Object} Radius
+ * @property {'4px'} radius4
+ * @property {'6px'} radius6
+ * @property {'8px'} radius8
+ * @property {'12px'} radius12
+ * @property {'16px'} radius16
+ */
+/**
+ * @type {Radius}
+ */
+export const radiuses = {
+    radius4: '4px',
+    radius6: '6px',
+    radius8: '8px',
+    radius12: '12px',
+    radius16: '16px',
+    radius20: '20px',
+    radiusFull: '100px',
+};

package/src/design_system/tokens/shadows.ts

@@ -0,0 +1,22 @@
+/**
+ * Shadow tokens - used box-shadow.
+ *
+ * @typedef {Object} Shadow
+ * @property {string} shadowActive - active shadow.
+ * @property {string} shadow1 - shadow 1.
+ * @property {string} shadow2 - shadow 2.
+ * @property {string} shadow3 - shadow 3.
+ * @property {string} shadow4 - shadow 4.
+ * @property {string} shadow5 - shadow 5.
+ */
+/**
+ * @type {Shadow}
+ */
+export const shadows = {
+    shadowActive: 'var(--shadow-active)',
+    shadow1: 'var(--shadow-1)',
+    shadow2: 'var(--shadow-2)',
+    shadow3: 'var(--shadow-3)',
+    shadow4: 'var(--shadow-4)',
+    shadow5: 'var(--shadow-5)',
+};

package/src/design_system/tokens/spaces.ts

@@ -0,0 +1,15 @@
+export type Size = keyof typeof spaces;
+
+export const spaces = {
+    space2: '0.2rem',
+    space4: '0.4rem',
+    space6: '0.6rem',
+    space8: '0.8rem',
+    space10: '1rem',
+    space12: '1.2rem',
+    space16: '1.6rem',
+    space24: '2.4rem',
+    space32: '3.2rem',
+    space40: '4rem',
+    space80: '8rem',
+} as const;

package/src/design_system/tokens/transitions.ts

@@ -0,0 +1,19 @@
+/**
+ * Transitions tokens - used for smooth state change.
+ * @typedef {Object} Transitions
+ * @property {'0.3s ease-in'} smoothEaseIn
+ * @property {'0.3s ease-out'} smoothEaseOut
+ * @property {'0.12s ease-out'} fastEaseOut
+ * @property {'0.12s ease-in'} fastEaseIn
+ * @property {'0.12s ease-in-out'} fastEaseInOut
+ */
+/**
+ * @type {Transitions}
+ */
+export const transitions = {
+    smoothEaseIn: '0.3s ease-in',
+    smoothEaseOut: '0.3s ease-out',
+    fastEaseIn: '0.12s ease-in',
+    fastEaseOut: '0.12s ease-out',
+    fastEaseInOut: '0.12s ease-in-out',
+};

package/src/design_system/typography_theme.ts

@@ -0,0 +1,197 @@
+/* eslint-disable max-len */
+export const typographyTokens = {
+    shared: {
+        mobile: {
+            title3xl: 'font-size: 2.8rem; line-height: 3.2rem; font-weight: 700; font-family: Inter, sans-serif;',
+            title2xl: 'font-size: 2.4rem; line-height: 2.8rem; font-weight: 700; font-family: Inter, sans-serif;',
+            titleXl: 'font-size: 2rem; line-height: 2.4rem; font-weight: 650; font-family: Inter, sans-serif;',
+            titleL: 'font-size: 1.8rem; line-height: 2.4rem; font-weight: 650; font-family: Inter, sans-serif;',
+            titleM: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 650; font-family: Inter, sans-serif;',
+            titleS: 'font-size: 1.4rem; line-height: 2rem; font-weight: 650; font-family: Inter, sans-serif;',
+            titleXs: 'font-size: 1.2rem; line-height: 1.6rem; font-weight: 650; font-family: Inter, sans-serif;',
+            bodyL: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 400; font-family: Inter, sans-serif;',
+            bodyLMedium: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; font-family: Inter, sans-serif;',
+            bodyLStrong: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 600; font-family: Inter, sans-serif;',
+            bodyM: 'font-size: 1.4rem; line-height: 2rem; font-weight: 400; font-family: Inter, sans-serif;',
+            bodyMMedium: 'font-size: 1.4rem; line-height: 2rem; font-weight: 500; font-family: Inter, sans-serif;',
+            bodyMStrong: 'font-size: 1.4rem; line-height: 2rem; font-weight: 600; font-family: Inter, sans-serif;',
+            bodyS: 'font-size: 1.2rem; line-height: 1.6rem; font-weight: 400; font-family: Inter, sans-serif;',
+            bodySMedium: 'font-size: 1.2rem; line-height: 1.6rem; font-weight: 500; font-family: Inter, sans-serif;',
+            bodySStrong: 'font-size: 1.2rem; line-height: 1.6rem; font-weight: 600; font-family: Inter, sans-serif;',
+            codeL: "font-size: 1.6rem; line-height: 2.4rem; font-weight: 400; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            codeLMedium: "font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            codeLStrong: "font-size: 1.6rem; line-height: 2.4rem; font-weight: 600; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            codeM: "font-size: 1.4rem; line-height: 2rem; font-weight: 400; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            codeMMedium: "font-size: 1.4rem; line-height: 2rem; font-weight: 500; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            codeMStrong: "font-size: 1.4rem; line-height: 2rem; font-weight: 600; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            codeS: "font-size: 1.2rem; line-height: 1.6rem; font-weight: 400; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            codeSMedium: "font-size: 1.2rem; line-height: 1.6rem; font-weight: 500; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            codeSStrong: "font-size: 1.2rem; line-height: 1.6rem; font-weight: 600; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+        },
+
+        tablet: {
+            title3xl: 'font-size: 3.6rem; line-height: 4.4rem; font-weight: 700; font-family: Inter, sans-serif;',
+            title2xl: 'font-size: 2.8rem; line-height: 3.2rem; font-weight: 700; font-family: Inter, sans-serif;',
+            titleXl: 'font-size: 2.4rem; line-height: 2.8rem; font-weight: 700; font-family: Inter, sans-serif;',
+            titleL: 'font-size: 2rem; line-height: 2.4rem; font-weight: 650; font-family: Inter, sans-serif;',
+            titleM: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 650; font-family: Inter, sans-serif;',
+            titleS: 'font-size: 1.4rem; line-height: 2rem; font-weight: 650; font-family: Inter, sans-serif;',
+            titleXs: 'font-size: 1.2rem; line-height: 1.6rem; font-weight: 650; font-family: Inter, sans-serif;',
+            bodyL: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 400; font-family: Inter, sans-serif;',
+            bodyLMedium: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; font-family: Inter, sans-serif;',
+            bodyLStrong: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 600; font-family: Inter, sans-serif;',
+            bodyM: 'font-size: 1.4rem; line-height: 2rem; font-weight: 400; font-family: Inter, sans-serif;',
+            bodyMMedium: 'font-size: 1.4rem; line-height: 2rem; font-weight: 500; font-family: Inter, sans-serif;',
+            bodyMStrong: 'font-size: 1.4rem; line-height: 2rem; font-weight: 600; font-family: Inter, sans-serif;',
+            bodyS: 'font-size: 1.2rem; line-height: 1.6rem; font-weight: 400; font-family: Inter, sans-serif;',
+            bodySMedium: 'font-size: 1.2rem; line-height: 1.6rem; font-weight: 500; font-family: Inter, sans-serif;',
+            bodySStrong: 'font-size: 1.2rem; line-height: 1.6rem; font-weight: 600; font-family: Inter, sans-serif;',
+            codeL: "font-size: 1.6rem; line-height: 2.4rem; font-weight: 400; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            codeLMedium: "font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            codeLStrong: "font-size: 1.6rem; line-height: 2.4rem; font-weight: 600; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            codeM: "font-size: 1.4rem; line-height: 2rem; font-weight: 400; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            codeMMedium: "font-size: 1.4rem; line-height: 2rem; font-weight: 500; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            codeMStrong: "font-size: 1.4rem; line-height: 2rem; font-weight: 600; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            codeS: "font-size: 1.2rem; line-height: 1.6rem; font-weight: 400; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            codeSMedium: "font-size: 1.2rem; line-height: 1.6rem; font-weight: 500; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            codeSStrong: "font-size: 1.2rem; line-height: 1.6rem; font-weight: 600; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+        },
+
+        desktop: {
+            title3xl: 'font-size: 3.6rem; line-height: 4.4rem; font-weight: 700; font-family: Inter, sans-serif;',
+            title2xl: 'font-size: 2.8rem; line-height: 3.2rem; font-weight: 700; font-family: Inter, sans-serif;',
+            titleXl: 'font-size: 2.4rem; line-height: 2.8rem; font-weight: 700; font-family: Inter, sans-serif;',
+            titleL: 'font-size: 2rem; line-height: 2.4rem; font-weight: 650; font-family: Inter, sans-serif;',
+            titleM: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 650; font-family: Inter, sans-serif;',
+            titleS: 'font-size: 1.4rem; line-height: 2rem; font-weight: 650; font-family: Inter, sans-serif;',
+            titleXs: 'font-size: 1.2rem; line-height: 1.6rem; font-weight: 650; font-family: Inter, sans-serif;',
+            bodyL: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 400; font-family: Inter, sans-serif;',
+            bodyLMedium: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; font-family: Inter, sans-serif;',
+            bodyLStrong: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 600; font-family: Inter, sans-serif;',
+            bodyM: 'font-size: 1.4rem; line-height: 2rem; font-weight: 400; font-family: Inter, sans-serif;',
+            bodyMMedium: 'font-size: 1.4rem; line-height: 2rem; font-weight: 500; font-family: Inter, sans-serif;',
+            bodyMStrong: 'font-size: 1.4rem; line-height: 2rem; font-weight: 600; font-family: Inter, sans-serif;',
+            bodyS: 'font-size: 1.2rem; line-height: 1.6rem; font-weight: 400; font-family: Inter, sans-serif;',
+            bodySMedium: 'font-size: 1.2rem; line-height: 1.6rem; font-weight: 500; font-family: Inter, sans-serif;',
+            bodySStrong: 'font-size: 1.2rem; line-height: 1.6rem; font-weight: 600; font-family: Inter, sans-serif;',
+            codeL: "font-size: 1.6rem; line-height: 2.4rem; font-weight: 400; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            codeLMedium: "font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            codeLStrong: "font-size: 1.6rem; line-height: 2.4rem; font-weight: 600; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            codeM: "font-size: 1.4rem; line-height: 2rem; font-weight: 400; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            codeMMedium: "font-size: 1.4rem; line-height: 2rem; font-weight: 500; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            codeMStrong: "font-size: 1.4rem; line-height: 2rem; font-weight: 600; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            codeS: "font-size: 1.2rem; line-height: 1.6rem; font-weight: 400; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            codeSMedium: "font-size: 1.2rem; line-height: 1.6rem; font-weight: 500; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            codeSStrong: "font-size: 1.2rem; line-height: 1.6rem; font-weight: 600; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+        },
+    },
+
+    marketing: {
+        mobile: {
+            title3xl: "font-size: 5.2rem; line-height: 6rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
+            title2xl: "font-size: 3.6rem; line-height: 4.6rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
+            titleXl: "font-size: 3.2rem; line-height: 4.2rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
+            titleL: "font-size: 2.8rem; line-height: 3.6rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
+            titleM: "font-size: 2.4rem; line-height: 3.2rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
+            titleS: 'font-size: 2rem; line-height: 2.4rem; font-weight: 650; font-family: Inter, sans-serif;',
+            titleXs: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 650; font-family: Inter, sans-serif;',
+            bodyL: 'font-size: 1.8rem; line-height: 2.8rem; font-weight: 400; font-family: Inter, sans-serif;',
+            bodyLMedium: 'font-size: 1.8rem; line-height: 2.8rem; font-weight: 500; font-family: Inter, sans-serif;',
+            bodyLStrong: 'font-size: 1.8rem; line-height: 2.8rem; font-weight: 700; font-family: Inter, sans-serif;',
+            bodyM: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 400; font-family: Inter, sans-serif;',
+            bodyMMedium: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; font-family: Inter, sans-serif;',
+            bodyMStrong: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 700; font-family: Inter, sans-serif;',
+            bodyS: 'font-size: 1.4rem; line-height: 2rem; font-weight: 400; font-family: Inter, sans-serif;',
+            bodySMedium: 'font-size: 1.4rem; line-height: 2rem; font-weight: 500; font-family: Inter, sans-serif;',
+            bodySStrong: 'font-size: 1.4rem; line-height: 2rem; font-weight: 700; font-family: Inter, sans-serif;',
+            bodyXs: 'font-size: 1.2rem; line-height: 1.6rem; font-weight: 400; font-family: Inter, sans-serif;',
+            bodyXsMedium: 'font-size: 1.2rem; line-height: 1.6rem; font-weight: 500; font-family: Inter, sans-serif;',
+            bodyXsStrong: 'font-size: 1.2rem; line-height: 1.6rem; font-weight: 700; font-family: Inter, sans-serif;',
+        },
+
+        tablet: {
+            title3xl: "font-size: 6.6rem; line-height: 7.6rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
+            title2xl: "font-size: 4.8rem; line-height: 5.8rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
+            titleXl: "font-size: 4.4rem; line-height: 5.4rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
+            titleL: "font-size: 3.2rem; line-height: 4.2rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
+            titleM: "font-size: 2.6rem; line-height: 3rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
+            titleS: 'font-size: 2rem; line-height: 2.4rem; font-weight: 650; font-family: Inter, sans-serif;',
+            titleXs: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 650; font-family: Inter, sans-serif;',
+            bodyL: 'font-size: 1.8rem; line-height: 2.8rem; font-weight: 400; font-family: Inter, sans-serif;',
+            bodyLMedium: 'font-size: 1.8rem; line-height: 2.8rem; font-weight: 500; font-family: Inter, sans-serif;',
+            bodyLStrong: 'font-size: 1.8rem; line-height: 2.8rem; font-weight: 700; font-family: Inter, sans-serif;',
+            bodyM: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 400; font-family: Inter, sans-serif;',
+            bodyMMedium: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; font-family: Inter, sans-serif;',
+            bodyMStrong: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 700; font-family: Inter, sans-serif;',
+            bodyS: 'font-size: 1.4rem; line-height: 2rem; font-weight: 400; font-family: Inter, sans-serif;',
+            bodySMedium: 'font-size: 1.4rem; line-height: 2rem; font-weight: 500; font-family: Inter, sans-serif;',
+            bodySStrong: 'font-size: 1.4rem; line-height: 2rem; font-weight: 700; font-family: Inter, sans-serif;',
+            bodyXs: 'font-size: 1.2rem; line-height: 1.6rem; font-weight: 400; font-family: Inter, sans-serif;',
+            bodyXsMedium: 'font-size: 1.2rem; line-height: 1.6rem; font-weight: 500; font-family: Inter, sans-serif;',
+            bodyXsStrong: 'font-size: 1.2rem; line-height: 1.6rem; font-weight: 700; font-family: Inter, sans-serif;',
+        },
+
+        desktop: {
+            title3xl: "font-size: 7.2rem; line-height: 8.2rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
+            title2xl: "font-size: 5.8rem; line-height: 6.8rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
+            titleXl: "font-size: 4.8rem; line-height: 5.8rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
+            titleL: "font-size: 4rem; line-height: 5rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
+            titleM: "font-size: 2.6rem; line-height: 3.4rem; font-weight: 400; font-family: 'GT-Walsheim-Regular', sans-serif;",
+            titleS: 'font-size: 2rem; line-height: 2.4rem; font-weight: 650; font-family: Inter, sans-serif;',
+            titleXs: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 650; font-family: Inter, sans-serif;',
+            bodyL: 'font-size: 1.8rem; line-height: 2.8rem; font-weight: 400; font-family: Inter, sans-serif;',
+            bodyLMedium: 'font-size: 1.8rem; line-height: 2.8rem; font-weight: 500; font-family: Inter, sans-serif;',
+            bodyLStrong: 'font-size: 1.8rem; line-height: 2.8rem; font-weight: 700; font-family: Inter, sans-serif;',
+            bodyM: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 400; font-family: Inter, sans-serif;',
+            bodyMMedium: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; font-family: Inter, sans-serif;',
+            bodyMStrong: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 700; font-family: Inter, sans-serif;',
+            bodyS: 'font-size: 1.4rem; line-height: 2rem; font-weight: 400; font-family: Inter, sans-serif;',
+            bodySMedium: 'font-size: 1.4rem; line-height: 2rem; font-weight: 500; font-family: Inter, sans-serif;',
+            bodySStrong: 'font-size: 1.4rem; line-height: 2rem; font-weight: 700; font-family: Inter, sans-serif;',
+            bodyXs: 'font-size: 1.2rem; line-height: 1.6rem; font-weight: 400; font-family: Inter, sans-serif;',
+            bodyXsMedium: 'font-size: 1.2rem; line-height: 1.6rem; font-weight: 500; font-family: Inter, sans-serif;',
+            bodyXsStrong: 'font-size: 1.2rem; line-height: 1.6rem; font-weight: 700; font-family: Inter, sans-serif;',
+        },
+    },
+
+    content: {
+        mobile: {
+            heading1: 'font-size: 2.4rem; line-height: 2.8rem; font-weight: 700; font-family: Inter, sans-serif;',
+            heading2: 'font-size: 2rem; line-height: 2.4rem; font-weight: 700; font-family: Inter, sans-serif;',
+            heading3: 'font-size: 1.8rem; line-height: 2.4rem; font-weight: 700; font-family: Inter, sans-serif;',
+            heading4: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 700; font-family: Inter, sans-serif;',
+            heading5: 'font-size: 1.4rem; line-height: 2rem; font-weight: 700; font-family: Inter, sans-serif;',
+            heading6: 'font-size: 1.2rem; line-height: 1.6rem; font-weight: 700; font-family: Inter, sans-serif;',
+            paragraph: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 400; font-family: Inter, sans-serif;',
+            paragraphStrong: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 700; font-family: Inter, sans-serif;',
+            snippet: "font-size: 1.4rem; line-height: 2rem; font-weight: 400; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            snippetStrong: "font-size: 1.4rem; line-height: 2rem; font-weight: 700; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+        },
+
+        tablet: {
+            heading1: 'font-size: 3.2rem; line-height: 4rem; font-weight: 700; font-family: Inter, sans-serif;',
+            heading2: 'font-size: 2.4rem; line-height: 2.8rem; font-weight: 700; font-family: Inter, sans-serif;',
+            heading3: 'font-size: 2rem; line-height: 2.4rem; font-weight: 700; font-family: Inter, sans-serif;',
+            heading4: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 700; font-family: Inter, sans-serif;',
+            heading5: 'font-size: 1.4rem; line-height: 2rem; font-weight: 700; font-family: Inter, sans-serif;',
+            heading6: 'font-size: 1.2rem; line-height: 1.6rem; font-weight: 700; font-family: Inter, sans-serif;',
+            paragraph: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 400; font-family: Inter, sans-serif;',
+            paragraphStrong: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 700; font-family: Inter, sans-serif;',
+            snippet: "font-size: 1.4rem; line-height: 2rem; font-weight: 400; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            snippetStrong: "font-size: 1.4rem; line-height: 2rem; font-weight: 700; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+        },
+
+        desktop: {
+            heading1: 'font-size: 3.2rem; line-height: 4rem; font-weight: 700; font-family: Inter, sans-serif;',
+            heading2: 'font-size: 2.4rem; line-height: 2.8rem; font-weight: 700; font-family: Inter, sans-serif;',
+            heading3: 'font-size: 2rem; line-height: 2.4rem; font-weight: 700; font-family: Inter, sans-serif;',
+            heading4: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 700; font-family: Inter, sans-serif;',
+            heading5: 'font-size: 1.4rem; line-height: 2rem; font-weight: 700; font-family: Inter, sans-serif;',
+            heading6: 'font-size: 1.2rem; line-height: 1.6rem; font-weight: 700; font-family: Inter, sans-serif;',
+            paragraph: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 400; font-family: Inter, sans-serif;',
+            paragraphStrong: 'font-size: 1.6rem; line-height: 2.4rem; font-weight: 700; font-family: Inter, sans-serif;',
+            snippet: "font-size: 1.4rem; line-height: 2rem; font-weight: 400; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+            snippetStrong: "font-size: 1.4rem; line-height: 2rem; font-weight: 700; font-family: 'IBM Plex Mono', Consolas, 'Liberation Mono', Menlo, monospace;",
+        },
+    },
+} as const;

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from './components';
+export * from './utils';
+export * from './design_system/tokens/index';
+export * from './design_system/theme';
+export * from './ui_dependency_provider';
+
+export * from './type_utils';

package/src/type_utils.ts

@@ -0,0 +1,7 @@
+// This utility will add $ at the beginning of the each interface prop
+// We do that in order to tell styled component to not propagate the given prop down to the dom element
+// It's called transient props (https://styled-components.com/docs/api#transient-props)
+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>;

package/src/ui_dependency_provider.tsx

@@ -0,0 +1,50 @@
+import React, { createContext, useContext } from 'react';
+
+import type { UiThemeOption } from './design_system/theme';
+
+export interface AgnosticInternalLinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+    // Here we should add special props that are supported by all Link implementation we use (react-router on console & next.js on web)
+    // The name or api could differ though - but as long as the functionality is supported we are good to go.
+    // For example: to is not supported by next.js link but it can be easily mapped. Other example is state which is not supported by next.js
+    replace?: boolean;
+    href: string;
+}
+
+export interface UiDependencies {
+    InternalLink: React.ForwardRefExoticComponent<AgnosticInternalLinkProps & React.RefAttributes<HTMLAnchorElement>>,
+    InternalImage: React.ForwardRefExoticComponent<React.RefAttributes<HTMLImageElement>>,
+    // We want to use Button from 'ui-components' directly in console before reexport doesn't preserve the typing
+    // Once console button is in ts, we can just define tracking logic there.
+    trackClick?: (id: string, data?: object) => void,
+    // We need to pass the current host from outside to be able to seamlessly use Links with next SSR
+    windowLocationHost: string,
+    // whether the href is trusted depends on setting (web/console location)
+    isHrefTrusted: (href: string) => boolean,
+    uiTheme?: UiThemeOption, // Optional - as we can just fallback to light theme on the web
+    // TODO: Make required once we add it on the web
+    generateProxyImageUrl?: (url: string, options: { extension?: string, resize?: { width?: number, height?: number } }) => string
+}
+
+interface UiDependencyProviderProps {
+    children: React.ReactNode,
+    dependencies: UiDependencies
+}
+
+const DependencyProviderContext = createContext<UiDependencies | null>(null);
+
+export const useSharedUiDependencies = () => {
+    const uiDependencies = useContext(DependencyProviderContext);
+    if (!uiDependencies) throw new Error('Application must be wrapped by UiDependencyProvider');
+    return uiDependencies;
+};
+
+export const UiDependencyProvider: React.FC<UiDependencyProviderProps> = ({
+    children,
+    dependencies,
+}) => {
+    return (
+        <DependencyProviderContext.Provider value={dependencies}>
+            {children}
+        </DependencyProviderContext.Provider>
+    );
+};

package/src/utils/copy_to_clipboard.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+
+interface UseCopyToClipboardProps {
+    text: string;
+    transform?: (text: string) => string;
+}
+
+export const useCopyToClipboard = ({ text, transform }: UseCopyToClipboardProps): [boolean, () => void] => {
+    const [toCopy, setToCopy] = useState(text);
+    const [isCopied, setCopied] = useState(false);
+
+    const handleClick = async () => {
+        await navigator.clipboard.writeText(toCopy);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1000);
+    };
+
+    // Need the useEffect because of SSR on web
+    useEffect(() => {
+        setToCopy(transform ? transform(text) : text);
+    }, [text, transform]);
+
+    return [isCopied, handleClick];
+};

package/src/utils/image_color.ts

@@ -0,0 +1,44 @@
+import type { FastAverageColorResult } from 'fast-average-color';
+import { FastAverageColor } from 'fast-average-color';
+import type { RefCallback } from 'react';
+import { useCallback, useState } from 'react';
+
+import log from '@apify/log';
+
+// Uses Luma (Y component of YIQ) computed from RGB to determine whether the color is dark.
+// See https://en.wikipedia.org/wiki/YIQ
+const isDark = (rgb: number[]): boolean => {
+    const y = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
+    return y < 200;
+};
+
+// The method used by the fast-average-color library to determine darkness does not fit our needs.
+const patchDarknessInfo = (color: FastAverageColorResult): FastAverageColorResult => ({
+    ...color,
+    isDark: isDark(color.value),
+    isLight: !isDark(color.value),
+});
+
+const fac = new FastAverageColor();
+
+export const useImageColor = () => {
+    const [color, setColor] = useState<FastAverageColorResult>();
+
+    const refCallback = useCallback<RefCallback<HTMLImageElement>>((element) => {
+        const updateColor = async () => {
+            if (!element) {
+                return;
+            }
+
+            try {
+                setColor(patchDarknessInfo(await fac.getColorAsync(element)));
+            } catch (error) {
+                log.error('Failed to determine the image color.', { error });
+            }
+        };
+
+        void updateColor();
+    }, []);
+
+    return { color, refCallback };
+};

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './copy_to_clipboard';
+export * from './sanitization';
+export * from './image_color';

package/src/utils/sanitization.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 const sanitizeUrl = (url: string) => {
+    if (typeof url !== 'string') return '';
+    const parsedUrl = new URL(url);
+    return parsedUrl.toString();
+};

package/tsconfig.build.json

@@ -0,0 +1,18 @@
+{
+    "extends": "../../../tsconfig.build.json",
+    "compilerOptions": {
+        "outDir": "./dist",
+        "jsx": "preserve",
+        "lib": ["dom", "ES2019"],
+        "module": "ESNext",
+        "skipLibCheck": true,
+    },
+    "references": [
+        { "path": "../icons/tsconfig.build.json" },
+        { "path": "../image-proxy-client/tsconfig.build.json" },
+        { "path": "../ui-icons/tsconfig.build.json" },
+    ],
+    "include": [
+        "src/**/*"
+    ]
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+    "extends": "../../../tsconfig.json",
+    "compilerOptions": {
+        "jsx": "preserve",
+        "lib": ["dom", "ES2019"],
+        "module": "ES2022",
+        "skipLibCheck": true,
+        "outDir": "./dist"
+    },
+}