@lumx/core 4.3.2-alpha.9 → 4.4.0

package/js/components/Thumbnail/Tests.d.ts

@@ -0,0 +1,11 @@
+import { SetupOptions } from '../../../testing';
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+export declare const setup: (propsOverride: any | undefined, { render, ...options }: SetupOptions<any>) => {
+    props: any;
+    thumbnail: HTMLElement;
+    wrapper: Partial<import("../../../testing").SetupResult>;
+};
+declare const _default: (renderOptions: SetupOptions<any>) => void;
+export default _default;

package/js/components/Thumbnail/index.d.ts

@@ -0,0 +1,84 @@
+import type { ImgHTMLAttributes } from 'react';
+import { AspectRatio, HorizontalAlignment } from '@lumx/core/js/constants';
+import type { GenericProps, HasTheme, CommonRef, JSXElement, LumxClassName, HasClassName } from '@lumx/core/js/types';
+import { ThumbnailSize, ThumbnailVariant, ThumbnailObjectFit } from './types';
+type ImgHTMLProps = ImgHTMLAttributes<HTMLImageElement>;
+/**
+ * Defines the props of the component.
+ */
+export interface ThumbnailProps extends HasTheme, HasClassName {
+    /** Alignment of the thumbnail in it's parent (requires flex parent). */
+    align?: HorizontalAlignment;
+    /** Image alternative text. */
+    alt: string;
+    /** Image aspect ratio. */
+    aspectRatio?: AspectRatio;
+    /** Badge. */
+    badge?: JSXElement;
+    /** Image cross origin resource policy. */
+    crossOrigin?: ImgHTMLProps['crossOrigin'];
+    /** Fallback icon (SVG path) or react node when image fails to load. */
+    fallback?: string | JSXElement;
+    /** Whether the thumbnail should fill it's parent size (requires flex parent) or not. */
+    fillHeight?: boolean;
+    /** Image URL. */
+    image: string;
+    loadingState: string;
+    /** Props to inject into the native <img> element. */
+    imgProps?: ImgHTMLProps;
+    /** Reference to the native <img> element. */
+    imgRef?: CommonRef;
+    ref?: CommonRef;
+    /** Set to true to force the display of the loading skeleton. */
+    isLoading?: boolean;
+    /** Set how the image should fit when its aspect ratio is constrained */
+    objectFit?: ThumbnailObjectFit;
+    /** Size variant of the component. */
+    size?: ThumbnailSize;
+    /** Image loading mode. */
+    loading?: 'eager' | 'lazy';
+    /** Ref of an existing placeholder image to display while loading. */
+    loadingPlaceholderImageRef?: React.RefObject<HTMLImageElement>;
+    /** On click callback. */
+    handleClick?: (event: any) => void;
+    /** On key press callback. */
+    handleKeyPress?: (event: any) => void;
+    /** Variant of the component. */
+    variant?: ThumbnailVariant;
+    /** Props to pass to the link wrapping the thumbnail. */
+    linkProps?: GenericProps;
+    focusPointStyle?: GenericProps;
+    disabledStateProps?: GenericProps;
+    isAnyDisabled?: boolean;
+    /** Custom react component for the link (can be used to inject react router Link). */
+    linkAs?: 'a' | any;
+    'aria-label'?: string;
+}
+/**
+ * Component display name.
+ */
+export declare const COMPONENT_NAME = "Thumbnail";
+/**
+ * Component default class name and class prefix.
+ */
+export declare const CLASSNAME: LumxClassName<typeof COMPONENT_NAME>;
+export declare const block: {
+    (additionalClasses: import("classnames/types").ClassValue[]): string;
+    (modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: import("classnames/types").ClassValue[]): string;
+}, element: {
+    (elem: string, additionalClasses: import("classnames/types").ClassValue[]): string;
+    (elem: string, modifiers?: import("../../utils/classNames/bem/modifier").Modifier, additionalClasses?: import("classnames/types").ClassValue[]): string;
+};
+/**
+ * Component default props.
+ */
+export declare const DEFAULT_PROPS: Partial<ThumbnailProps>;
+/**
+ * Thumbnail component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+export declare const Thumbnail: (props: ThumbnailProps) => import("react").JSX.Element;
+export * from './utils';

package/js/components/Thumbnail/types.d.ts

@@ -0,0 +1,45 @@
+import { AspectRatio, Size } from '../../constants';
+import { ValueOf } from '../../types';
+/**
+ *  Focal point using vertical alignment, horizontal alignment or coordinates (from -1 to 1).
+ */
+export type FocusPoint = {
+    x?: number;
+    y?: number;
+};
+/**
+ * Loading attribute is not yet supported in typescript, so we need
+ * to add it in order to avoid a ts error.
+ * https://github.com/typescript-cheatsheets/react-typescript-cheatsheet/blob/master/ADVANCED.md#adding-non-standard-attributes
+ */
+declare module 'react' {
+    interface ImgHTMLAttributes<T> extends React.HTMLAttributes<T> {
+        loading?: 'eager' | 'lazy';
+    }
+}
+/**
+ * All available aspect ratios.
+ * @deprecated
+ */
+export declare const ThumbnailAspectRatio: Record<string, AspectRatio>;
+/**
+ *  Thumbnail sizes.
+ */
+export type ThumbnailSize = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;
+/**
+ * Thumbnail variants.
+ */
+export declare const ThumbnailVariant: {
+    readonly squared: "squared";
+    readonly rounded: "rounded";
+};
+export type ThumbnailVariant = ValueOf<typeof ThumbnailVariant>;
+/**
+ * Thumbnail object fit.
+ */
+export declare const ThumbnailObjectFit: {
+    readonly cover: "cover";
+    readonly contain: "contain";
+};
+export type ThumbnailObjectFit = ValueOf<typeof ThumbnailObjectFit>;
+export type LoadingState = 'isLoading' | 'isLoaded' | 'hasError';

package/js/components/Thumbnail/utils.d.ts

@@ -0,0 +1,79 @@
+import type { CSSProperties } from 'react';
+import type { RectSize } from '../../types';
+import { AspectRatio } from '../../constants';
+import type { FocusPoint, LoadingState } from './types';
+/**
+ * Determines the loading state of an HTML image element.
+ *
+ * @param img - The HTML image element to check
+ * @param event - Optional event (load or error) that triggered the state check
+ * @returns The current loading state: 'hasError', 'isLoading', or 'isLoaded'
+ */
+export declare function getImageLoadingState(img: HTMLImageElement | null | undefined, event?: Event): LoadingState;
+/**
+ * Parameters for getting image size.
+ */
+export interface GetImageSizeParams {
+    /** Image URL (used for validation) */
+    image?: string;
+    /** Aspect ratio setting */
+    aspectRatio?: AspectRatio;
+    /** Focus point (if not set, size calculation is skipped) */
+    focusPoint?: FocusPoint;
+    /** Width from imgProps */
+    width?: number;
+    /** Height from imgProps */
+    height?: number;
+    /** Image element (for getting natural dimensions) */
+    element?: HTMLImageElement;
+    /** Whether image is loaded */
+    isLoaded: boolean;
+}
+/**
+ * Gets the natural image size from props or element.
+ * Returns undefined if focus point is not applicable or size cannot be determined.
+ *
+ * @param params - Image size parameters
+ * @returns Image size or undefined
+ */
+export declare function getImageSize({ image, aspectRatio, focusPoint, width, height, element, isLoaded, }: GetImageSizeParams): RectSize | undefined;
+/**
+ * Calculate shift position to center the focus point in the container.
+ *
+ * This function computes the percentage offset needed to position an image
+ * such that a specific focus point on the image aligns with the center of
+ * the container, taking into account the image's scale.
+ *
+ * @param params - Focus point shift calculation parameters
+ * @returns Percentage shift (0-100) for CSS positioning
+ */
+export declare function shiftPosition({ scale, focusPoint, imageSize, containerSize, }: {
+    scale: number;
+    focusPoint: number;
+    imageSize: number;
+    containerSize: number;
+}): number;
+/**
+ * Parameters for calculating focus point style.
+ */
+export interface CalculateFocusPointStyleParams {
+    /** Image URL */
+    image?: string;
+    /** Aspect ratio */
+    aspectRatio?: AspectRatio;
+    /** Focus point */
+    focusPoint?: FocusPoint;
+    /** Image element (for validation) */
+    element?: HTMLImageElement;
+    /** Natural image size */
+    imageSize?: RectSize;
+    /** Container size */
+    containerSize?: RectSize;
+}
+/**
+ * Calculates CSS style for applying focus point positioning.
+ *
+ * @param params - Focus point style parameters
+ * @returns CSS properties to apply to the image
+ */
+export declare function calculateFocusPointStyle({ image, aspectRatio, focusPoint, element, imageSize, containerSize, }: CalculateFocusPointStyleParams): CSSProperties;

package/js/components/Toolbar/Tests.d.ts

@@ -0,0 +1,12 @@
+import { SetupOptions } from '../../../testing';
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+export declare const setup: (propsOverride: any | undefined, { render, ...options }: SetupOptions<any>) => {
+    props: any;
+    toolbar: HTMLElement;
+    div: HTMLElement;
+    wrapper: Partial<import("../../../testing").SetupResult>;
+};
+declare const _default: (renderOptions: SetupOptions<any>) => void;
+export default _default;

package/js/types/AriaAttributes.d.ts

@@ -1,2 +1,29 @@
-import type { AriaAttributes } from 'react';
-export type { AriaAttributes };
+/**
+ * ARIA attributes type for components.
+ * All attributes are optional.
+ *
+ * This is a custom interface containing only the ARIA attributes
+ * actually used in the @lumx/core components, avoiding dependency on React types.
+ */
+export interface AriaAttributes {
+    /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
+    'aria-expanded'?: boolean | 'true' | 'false';
+    /** Indicates the availability and type of interactive popup element that can be triggered by the element. */
+    'aria-haspopup'?: boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    /** Indicates the current "pressed" state of toggle buttons. */
+    'aria-pressed'?: boolean | 'false' | 'mixed' | 'true';
+    /** Defines a string value that labels the current element. */
+    'aria-label'?: string;
+    /** Identifies the element (or elements) that labels the current element. */
+    'aria-labelledby'?: string;
+    /** Identifies the element (or elements) that describes the object. */
+    'aria-describedby'?: string;
+    /** Indicates whether the element is exposed to an accessibility API. */
+    'aria-hidden'?: boolean | 'true' | 'false';
+    /** Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. */
+    'aria-disabled'?: boolean | 'true' | 'false';
+    /** Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. */
+    'aria-checked'?: boolean | 'false' | 'mixed' | 'true';
+    /** Indicates whether items in a table or grid are sorted in ascending or descending order. */
+    'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other';
+}

package/js/types/index.d.ts

@@ -25,4 +25,5 @@ export type { HasChecked } from './HasChecked';
 export type { HasDisabled } from './HasDisabled';
 export type { AriaAttributes } from './AriaAttributes';
 export type { Selector } from './Selector';
+export type { PropsToOverride } from './jsx/PropsToOverride';
 export type { PartialBy, PartialExcept } from './PartialBy';

package/js/types/jsx/PropsToOverride.d.ts

@@ -0,0 +1,2 @@
+/** list of generic props defined on JSX that need to be redefined for each framework */
+export type PropsToOverride = 'ref' | 'handleClick' | 'handleChange' | 'handleKeyPress';

package/lumx.css

@@ -685,18 +685,6 @@
  * List of deprecated v2 variables that have been removed or renamed.
  * Warning: These will be removed in the next major version.
  */
-/**
- * Add styles before & after an element while avoiding having a "before" section display if an "after" section was
- displayed.
- */
-/**
- * Automatic divider between elements of a list using border before and after the element
- *
- * @param $orientation  Required 'vertical'/'horizontal' orientation
- * @param $selector     Optional element selector to apply to (default to parent '&' selector)
- * @param $theme        Optional 'theme-light'/'theme-dark' (defaults to 'theme-light')
- * @param $spacing      Optional spacing around dividers (defaults to $lumx-spacing-unit-regular)
- */
 /* stylelint-disable custom-property-pattern */
 /** @deprecated: replaced with $lumx-progress-circular-size-map */
 /**
@@ -5069,88 +5057,6 @@ table {
   width: 100%;
 }
 
-/* ==========================================================================
-   Combobox Divider
-   ========================================================================== */
-.lumx-combobox-divider:last-child, .lumx-combobox-divider:first-child {
-  display: none;
-}
-
-/* ==========================================================================
-   Combobox Option
-   ========================================================================== */
-.lumx-combobox-option {
-  position: relative;
-}
-.lumx-combobox-option__content {
-  gap: 0;
-}
-.lumx-combobox-option__content--is-disabled {
-  opacity: 0.5;
-}
-.lumx-combobox-option__trigger {
-  color: rgba(0, 0, 0, 0.87);
-  text-decoration: none;
-  overflow: hidden;
-  overflow-wrap: break-word;
-}
-.lumx-combobox-option__trigger::before {
-  content: "";
-  cursor: pointer;
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  top: 0;
-  z-index: 2;
-}
-.lumx-combobox-option__after {
-  z-index: 3;
-}
-
-/* ==========================================================================
-   Combobox Listbox
-   ========================================================================== */
-.lumx-combobox-listbox:empty {
-  padding: 0;
-}
-.lumx-combobox-listbox__state {
-  text-align: center;
-  margin: 8px;
-}
-
-/* ==========================================================================
-   Combobox Option more Info
-   ========================================================================== */
-.lumx-combobox-option-more-info__popover {
-  padding: 16px;
-  max-width: 256px;
-}
-
-/* ==========================================================================
-   Combobox Section
-   ========================================================================== */
-.lumx-combobox-section:not(:first-child):not(.lumx-combobox-section + .lumx-combobox-section):not(.visually-hidden + .lumx-combobox-section)::before {
-  content: "";
-  display: block;
-  height: 1px;
-  margin: 0;
-  border: none;
-  background-color: var(--lumx-color-dark-L5);
-  margin-top: 8px;
-  margin-bottom: 8px;
-}
-.lumx-combobox-section:not(:last-child):not(:has(+ .visually-hidden)):not(:has(+ [aria-hidden=true]))::after {
-  content: "";
-  display: block;
-  height: 1px;
-  margin: 0;
-  border: none;
-  background-color: var(--lumx-color-dark-L5);
-  margin-top: 8px;
-  margin-bottom: 8px;
-}
-
 /* ==========================================================================
    Checkbox
    ========================================================================== */

package/package.json

@@ -6,7 +6,7 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/icons": "^4.3.2-alpha.9",
+        "@lumx/icons": "^4.4.0",
         "classnames": "^2.3.2",
         "focus-visible": "^5.0.2",
         "lodash": "4.17.23",
@@ -22,6 +22,35 @@
     "license": "MIT",
     "type": "module",
     "name": "@lumx/core",
+    "exports": {
+        "./js/constants": {
+            "types": "./js/constants/index.d.ts",
+            "default": "./js/constants/index.js"
+        },
+        "./js/types": {
+            "types": "./js/types/index.d.ts",
+            "default": "./js/types/index.js"
+        },
+        "./js/utils/classNames": {
+            "types": "./js/utils/classNames/index.d.ts",
+            "default": "./js/utils/classNames/index.js"
+        },
+        "./js/utils/disabledState": {
+            "types": "./js/utils/disabledState/index.d.ts",
+            "default": "./js/utils/disabledState/index.js"
+        },
+        "./js/utils/selectors": {
+            "types": "./js/utils/selectors/index.d.ts",
+            "default": "./js/utils/selectors/index.js"
+        },
+        "./js/utils": {
+            "types": "./js/utils/index.d.ts",
+            "default": "./js/utils/index.js"
+        },
+        "./lumx.css": "./lumx.css",
+        "./css/*": "./css/*",
+        "./scss/*": "./scss/*"
+    },
     "publishConfig": {
         "directory": "dist"
     },
@@ -37,7 +66,7 @@
         "update-version-changelog": "yarn version-changelog ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "4.3.2-alpha.9",
+    "version": "4.4.0",
     "devDependencies": {
         "@rollup/plugin-typescript": "^12.3.0",
         "@testing-library/dom": "^10.4.1",
@@ -60,6 +89,5 @@
         "vite": "^7.3.1",
         "vite-tsconfig-paths": "^5.1.4",
         "vitest": "^4.0.18"
-    },
-    "stableVersion": "4.3.1"
+    }
 }

package/scss/_components.scss

@@ -3,7 +3,6 @@
 @import "./components/checkbox/mixins";
 @import "./components/chip/variables";
 @import "./components/chip/mixins";
-@import "./components/combobox/mixins";
 @import "./components/dialog/variables";
 @import "./components/divider/variables";
 @import "./components/divider/mixins";

package/scss/lumx.scss

@@ -20,7 +20,6 @@
 @import "./components/avatar/index";
 @import "./components/badge/index";
 @import "./components/button/index";
-@import "./components/combobox/index";
 @import "./components/checkbox/index";
 @import "./components/chip/index";
 @import "./components/comment-block/index";

package/stories/controls/color.d.ts

@@ -0,0 +1,15 @@
+export declare const ALL_COLORS: ("light" | "dark" | "primary" | "secondary" | "blue" | "green" | "yellow" | "red" | "grey")[];
+export declare const colorArgType: {
+    control: {
+        type: "select" | "inline-radio";
+    };
+    options: ("light" | "dark" | "primary" | "secondary" | "blue" | "green" | "yellow" | "red" | "grey" | undefined)[];
+    mapping: Record<string, "light" | "dark" | "primary" | "secondary" | "blue" | "green" | "yellow" | "red" | "grey" | undefined> | undefined;
+};
+export declare const colorVariantArgType: {
+    control: {
+        type: "select" | "inline-radio";
+    };
+    options: ("D1" | "D2" | "L1" | "L2" | "L3" | "L4" | "L5" | "L6" | "N")[];
+    mapping: Record<string, "D1" | "D2" | "L1" | "L2" | "L3" | "L4" | "L5" | "L6" | "N"> | undefined;
+};

package/stories/controls/element.d.ts

@@ -0,0 +1,16 @@
+import { HeadingElement, TextElement } from '../../js/types';
+export declare const HEADING_ELEMENTS: HeadingElement[];
+export declare const headingElementArgType: {
+    control: {
+        type: "select" | "inline-radio";
+    };
+    options: HeadingElement[];
+    mapping: Record<string, HeadingElement> | undefined;
+};
+export declare const textElementArgType: {
+    control: {
+        type: "select" | "inline-radio";
+    };
+    options: TextElement[];
+    mapping: Record<string, TextElement> | undefined;
+};

package/stories/controls/focusPoint.d.ts

@@ -0,0 +1,8 @@
+export declare const focusPoint: {
+    control: {
+        type: string;
+        min: number;
+        max: number;
+        step: number;
+    };
+};

package/stories/controls/icons.d.ts

@@ -0,0 +1,66 @@
+export declare const iconArgType: {
+    control: {
+        type: string;
+    };
+    options: {
+        undefined: undefined;
+        mdiAbTesting: string;
+        mdiAbjadArabic: string;
+        mdiAccount: string;
+        mdiAccountBox: string;
+        mdiAlert: string;
+        mdiAlertCircle: string;
+        mdiArrowDown: string;
+        mdiArrowUp: string;
+        mdiAtom: string;
+        mdiBee: string;
+        mdiBell: string;
+        mdiBullhornOutline: string;
+        mdiCheck: string;
+        mdiCheckCircle: string;
+        mdiChevronDown: string;
+        mdiChevronLeft: string;
+        mdiChevronRight: string;
+        mdiChevronUp: string;
+        mdiClose: string;
+        mdiCloseCircle: string;
+        mdiDelete: string;
+        mdiDotsHorizontal: string;
+        mdiDragVertical: string;
+        mdiEarth: string;
+        mdiEmail: string;
+        mdiEye: string;
+        mdiFileEdit: string;
+        mdiFlag: string;
+        mdiFolder: string;
+        mdiFolderGoogleDrive: string;
+        mdiFoodApple: string;
+        mdiGoogleCirclesExtended: string;
+        mdiHeart: string;
+        mdiHome: string;
+        mdiImageBroken: string;
+        mdiInformation: string;
+        mdiLink: string;
+        mdiMagnifyMinusOutline: string;
+        mdiMagnifyPlusOutline: string;
+        mdiMenuDown: string;
+        mdiMessageTextOutline: string;
+        mdiMinus: string;
+        mdiOpenInNew: string;
+        mdiPauseCircleOutline: string;
+        mdiPencil: string;
+        mdiPlay: string;
+        mdiPlayCircleOutline: string;
+        mdiPlus: string;
+        mdiRadioboxBlank: string;
+        mdiRadioboxMarked: string;
+        mdiReply: string;
+        mdiSend: string;
+        mdiStar: string;
+        mdiTextBox: string;
+        mdiTextBoxPlus: string;
+        mdiTram: string;
+        mdiTranslate: string;
+        mdiViewList: string;
+    };
+};

package/stories/controls/image.d.ts

@@ -0,0 +1,96 @@
+export declare const AVATAR_IMAGES: {
+    avatar1: string;
+    avatar2: string;
+    avatar3: string;
+    avatar4: string;
+};
+export declare const SQUARE_IMAGES: {
+    square1: string;
+    square2: string;
+};
+export declare const SVG_IMAGES: {
+    defaultSvg: string;
+};
+export declare const EMPTY_IMAGES: {
+    emptyImage: string;
+};
+export declare const LANDSCAPE_IMAGES: {
+    landscape1: string;
+    landscape1s200: string;
+    landscape2: string;
+    landscape3: string;
+};
+export declare const LANDSCAPE_IMAGES_ALT: {
+    [key in keyof typeof LANDSCAPE_IMAGES]: string;
+};
+export declare const PORTRAIT_IMAGES: {
+    portrait1: string;
+    portrait1s200: string;
+    portrait2: string;
+    portrait3: string;
+};
+export declare const IMAGES: {
+    emptyImage: string;
+    defaultSvg: string;
+    avatar1: string;
+    avatar2: string;
+    avatar3: string;
+    avatar4: string;
+    square1: string;
+    square2: string;
+    portrait1: string;
+    portrait1s200: string;
+    portrait2: string;
+    portrait3: string;
+    landscape1: string;
+    landscape1s200: string;
+    landscape2: string;
+    landscape3: string;
+};
+export declare const avatarImageArgType: {
+    control: {
+        type: "select" | "inline-radio";
+    };
+    options: string[];
+    mapping: Record<string, string> | undefined;
+};
+export declare const squareImageArgType: {
+    control: {
+        type: "select" | "inline-radio";
+    };
+    options: string[];
+    mapping: Record<string, string> | undefined;
+};
+export declare const landscapeImageArgType: {
+    control: {
+        type: "select" | "inline-radio";
+    };
+    options: string[];
+    mapping: Record<string, string> | undefined;
+};
+export declare const portraitImageArgType: {
+    control: {
+        type: "select" | "inline-radio";
+    };
+    options: string[];
+    mapping: Record<string, string> | undefined;
+};
+export declare const imageArgType: {
+    control: {
+        type: "select" | "inline-radio";
+    };
+    options: string[];
+    mapping: Record<string, string> | undefined;
+};
+type Size = {
+    width: number;
+    height: number;
+};
+export declare const AVATAR_IMAGE_SIZES: Record<keyof typeof AVATAR_IMAGES, Size>;
+export declare const SQUARE_IMAGE_SIZES: Record<keyof typeof SQUARE_IMAGES, Size>;
+export declare const LANDSCAPE_IMAGE_SIZES: Record<keyof typeof LANDSCAPE_IMAGES, Size>;
+export declare const PORTRAIT_IMAGE_SIZES: Record<keyof typeof PORTRAIT_IMAGES, Size>;
+export declare const SVG_IMAGE_SIZES: Record<keyof typeof SVG_IMAGES, Size>;
+export declare const EMPTY_IMAGES_SIZES: Record<keyof typeof EMPTY_IMAGES, Size>;
+export declare const IMAGE_SIZES: Record<keyof typeof IMAGES, Size>;
+export {};