@apify/ui-library 0.71.1-featcolortokens-178953.56 → 0.71.1-featcolortokens-178953.63

package/src/design_system/tokens/layouts.ts

@@ -1,29 +0,0 @@
-/**
- * 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

@@ -1,22 +0,0 @@
-/**
- * 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

@@ -1,22 +0,0 @@
-/**
- * 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

@@ -1,15 +0,0 @@
-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;
-
-export type Size = keyof typeof spaces;

package/src/design_system/tokens/transitions.ts

@@ -1,19 +0,0 @@
-/**
- * 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

@@ -1,197 +0,0 @@
-/* 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

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

package/src/type_utils.ts

@@ -1,7 +0,0 @@
-// 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

@@ -1,58 +0,0 @@
-import React, { createContext, useContext } from 'react';
-
-import type { UiThemeOption } from './design_system/theme.js';
-
-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 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>>,
-    // 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: ImageProxyOptions) => 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

@@ -1,24 +0,0 @@
-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

@@ -1,42 +0,0 @@
-import type { FastAverageColorResult } from 'fast-average-color';
-import { FastAverageColor } from 'fast-average-color';
-import type { RefCallback } from 'react';
-import { useCallback, useState } from 'react';
-
-// 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) {
-                console.error('Failed to determine the image color.', { error });
-            }
-        };
-
-        void updateColor();
-    }, []);
-
-    return { color, refCallback };
-};

package/src/utils/index.ts

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

package/src/utils/resize_observer.ts

@@ -1,18 +0,0 @@
-/* eslint-disable @typescript-eslint/no-useless-constructor, @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars */
-import type { UseResizeObserverCallback } from '@react-hook/resize-observer';
-import useResizeObserver from '@react-hook/resize-observer';
-
-class ServerSideResizeObserverPolyfill {
-    constructor(callback: ResizeObserverCallback) {}
-    observe(target: Element, options?: ResizeObserverOptions) {}
-    unobserve(target: Element) {}
-}
-
-export const useResizeObserverSsr = <T extends Element>(
-    target: React.RefObject<T> | React.ForwardedRef<T> | T | null,
-    callback: UseResizeObserverCallback,
-) => {
-    return useResizeObserver(target, callback, {
-        polyfill: typeof window === 'undefined' ? ServerSideResizeObserverPolyfill : null,
-    });
-};

package/src/utils/sanitization.ts

@@ -1,14 +0,0 @@
-/**
- * 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

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

package/tsconfig.json

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