@ozen-ui/kit 0.77.0 → 0.79.0

package/__inner__/esm/components/DatePicker/types.d.ts

@@ -1,56 +1,13 @@
-import type { ChangeEvent, ComponentRef, ReactNode } from 'react';
+import type { ComponentRef, ReactNode } from 'react';
 import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
 import type { WithDisplayName } from '../../types/react';
-import type { CalendarPropCalendars, CalendarProps, CalendarSteps } from '../Calendar';
+import type { CalendarPropCalendars, CalendarProps } from '../Calendar';
 import type { FieldHintProps } from '../FieldHint';
-import type { FieldInputProps } from '../FieldInput';
-import type { FieldLabelProps } from '../FieldLabel';
 import type { InputProps } from '../Input';
 import type { PopoverBaseProps } from '../Popover';
-import type { StackProps } from '../Stack';
 import type { DATE_PICKER_DEFAULT_MODE } from './constants';
-export declare const datePickerModeVariant: readonly ["date", "date-range"];
-type Range = 'date-range';
-export type DatePickerModeVariant = (typeof datePickerModeVariant)[number];
-export type DatePickerPropInputValue<MODE extends DatePickerModeVariant> = (MODE extends Range ? [string, string] : string) | null;
-export type DatePickerPropOnInputChange<MODE extends DatePickerModeVariant> = (e: ChangeEvent<HTMLInputElement> | null, value: DatePickerPropInputValue<MODE>) => void;
-export type DatePickerPropValue<MODE extends DatePickerModeVariant> = (MODE extends Range ? [Date?, Date?] : Date) | null;
-export type DatePickerPropOnChange<MODE extends DatePickerModeVariant> = (date: DatePickerPropValue<MODE>) => void;
-type InputPropLabel = InputProps['label'];
-type InputPropRenderLeft = InputProps['renderLeft'];
-type InputPropRenderRight = InputProps['renderRight'];
-type InputPropPlaceholderString = InputProps['placeholder'];
-type InputPropPlaceholderFunction = (steps: CalendarSteps) => InputPropPlaceholderString;
-export type InputPropPlaceholder = InputPropPlaceholderString | InputPropPlaceholderFunction;
-export declare const datePickerSizeVariant: readonly ["2xs", "xs", "s", "m", "l"];
-export type DatePickerSizeVariant = (typeof datePickerSizeVariant)[number];
-export type DatePickerPropLabel<MODE> = MODE extends Range ? [InputPropLabel?, InputPropLabel?] | InputPropLabel : InputPropLabel;
-export type DatePickerPropRenderLeft<MODE> = MODE extends Range ? [InputPropRenderLeft?, InputPropRenderLeft?] | InputPropRenderLeft : InputPropRenderLeft;
-export type DatePickerPropRenderRight<MODE> = MODE extends Range ? [InputPropRenderRight?, InputPropRenderRight?] | InputPropRenderRight : InputPropRenderRight;
-export type DatePickerPropPlaceholder<MODE> = MODE extends Range ? [InputPropPlaceholder?, InputPropPlaceholder?] | InputPropPlaceholder : InputPropPlaceholder;
-export type DatePickerPropInputProps<MODE> = MODE extends Range ? [FieldInputProps?, FieldInputProps?] | FieldInputProps : FieldInputProps;
-export type DatePickerPropLabelProps<MODE> = MODE extends Range ? [FieldLabelProps?, FieldLabelProps?] | FieldLabelProps : FieldLabelProps;
-export type DatePickerPropFieldsProps<MODE> = MODE extends Range ? StackProps : never;
-export type DatePickerPropOnError = (props: {
-    type: 'outOfRange';
-    inputValue?: string;
-    value?: Date | null;
-} | {
-    type: 'inExclude';
-    inputValue?: string;
-    value?: Date | null;
-}) => void;
+import type { DatePickerModeVariant, DatePickerPropOnInputChange, DatePickerPropValue, DatePickerPropOnChange, DatePickerPropRenderLeft, DatePickerPropRenderRight, DatePickerPropPlaceholder, DatePickerPropOnError, DatePickerPropLabel, DatePickerPropInputProps, DatePickerPropFieldsProps, DatePickerPropLabelProps, DatePickerSizeVariant, DatePickerBackgroundVariant } from './entities';
 export type DatePickerRef = ComponentRef<'div'>;
-/**
- * @deprecated
- * Use the `DatePickerPropOnChange` type to replace it.
- * */
-export type DatePickerOnChange<MODE extends DatePickerModeVariant> = DatePickerPropOnChange<MODE>;
-/**
- * @deprecated
- * Use the `DatePickerPropOnInputChange` type to replace it.
- * */
-export type DatePickerOnInputChange<MODE extends DatePickerModeVariant> = DatePickerPropOnInputChange<MODE>;
 export type DatePickerProps<MODE extends DatePickerModeVariant = typeof DATE_PICKER_DEFAULT_MODE> = ExtendableComponentPropsWithRef<{
     mode?: MODE;
     /** Выбранная дата */
@@ -113,7 +70,8 @@ export type DatePickerProps<MODE extends DatePickerModeVariant = typeof DATE_PIC
     fieldsProps?: DatePickerPropFieldsProps<MODE>;
     /** Количество отображаемых календарей в компоненте: один или два */
     calendars?: CalendarPropCalendars;
+    /** Задний фон */
+    background?: DatePickerBackgroundVariant;
 } & Pick<CalendarProps, 'minDate' | 'maxDate' | 'exclude' | 'steps' | 'initialStep'> & Pick<InputProps, 'onKeyDown'>, 'div'>;
 export type DatePickerComponent = WithDisplayName<(<MODE extends DatePickerModeVariant = typeof DATE_PICKER_DEFAULT_MODE>(props: DatePickerProps<MODE>) => ReactNode)>;
 export type DatePickerModeComponent<MODE extends DatePickerModeVariant> = WithDisplayName<(props: Omit<DatePickerProps<MODE>, 'mode'>) => ReactNode>;
-export {};

package/__inner__/esm/components/DatePicker/types.js

@@ -1,3 +1 @@
-import { formElementSizeVariant } from '../../types';
-export var datePickerModeVariant = ['date', 'date-range'];
-export var datePickerSizeVariant = formElementSizeVariant;
+export {};

package/__inner__/esm/components/DrawerNext/types.d.ts

@@ -27,4 +27,5 @@ export type DrawerDeviceTypeProps<DeviceType extends DrawerDeviceType | undefine
     /** Тип устройства */
     deviceType?: undefined;
 });
-export type DrawerProps = DrawerDeviceTypeProps<'mobile'> | DrawerDeviceTypeProps<'desktop'> | DrawerDeviceTypeProps<undefined>;
+export type DrawerOmittedProps<OmittingKeys extends keyof DrawerBaseProps | ''> = Omit<DrawerDeviceTypeProps<'mobile'>, OmittingKeys> | Omit<DrawerDeviceTypeProps<'desktop'>, OmittingKeys> | Omit<DrawerDeviceTypeProps<undefined>, OmittingKeys>;
+export type DrawerProps = DrawerOmittedProps<''>;

package/__inner__/esm/components/FieldControl/FieldControl.css

@@ -4,7 +4,6 @@
   --textfield-border-width: var(--border-width-s);
   --textfield-border-color: var(--color-border-main);
   --textfield-placeholder-color: var(--color-content-tertiary);
-  --textfield-background-color: var(--color-background-primary);
   cursor: text;
   vertical-align: top;
   display: inline-flex;
@@ -13,6 +12,12 @@
 .FieldControl > * {
     cursor: text;
   }
+.FieldControl_background_main {
+    --textfield-background-color: var(--color-background-main);
+  }
+.FieldControl_background_primary {
+    --textfield-background-color: var(--color-background-primary);
+  }
 .FieldControl_size_2xs {
       --textfield-input-padding: 8px 0;
       --textfield-input-gap: var(--spacing-2xs);

package/__inner__/esm/components/FieldControl/FieldControl.d.ts

@@ -1,13 +1,4 @@
 import './FieldControl.css';
-import type { ElementType, ComponentRef } from 'react';
-import { type PolymorphicComponentPropsWithoutRef } from '../../utils/polymorphicComponentWithRef';
-import type { FieldControlContextValue } from './index';
-export declare const FIELD_CONTROL_DEFAULT_TAG = "div";
-export type FieldControlRef = ComponentRef<typeof FIELD_CONTROL_DEFAULT_TAG>;
-export type FieldControlBaseProps = Omit<FieldControlContextValue, 'label'> & {
-    /** data-атрибут для тестирования */
-    'data-testid'?: string;
-};
-export type FieldControlProps<As extends ElementType = typeof FIELD_CONTROL_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<FieldControlBaseProps, As>;
+import type { FieldControlBaseProps } from './types';
 export declare const cnFieldControl: import("@bem-react/classname").ClassNameFormatter;
 export declare const FieldControl: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<FieldControlBaseProps, "div", "as">;

package/__inner__/esm/components/FieldControl/FieldControl.js

@@ -5,9 +5,9 @@ import { useHover } from '../../hooks/useHover';
 import { useMultiRef } from '../../hooks/useMultiRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
-import { polymorphicComponentWithRef, } from '../../utils/polymorphicComponentWithRef';
-import { FieldControlContext } from './index';
-export var FIELD_CONTROL_DEFAULT_TAG = 'div';
+import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
+import { FIELD_CONTROL_DEFAULT_BACKGROUND, FIELD_CONTROL_DEFAULT_TAG, } from './constants';
+import { FieldControlContext } from './FieldControlContext';
 export var cnFieldControl = cn('FieldControl');
 export var FieldControl = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({
@@ -16,7 +16,7 @@ export var FieldControl = polymorphicComponentWithRef(function (inProps, ref) {
     });
     var innerRef = useRef(null);
     var hovered = useHover(innerRef);
-    var _a = props.as, Tag = _a === void 0 ? FIELD_CONTROL_DEFAULT_TAG : _a, disableStrokeProp = props.disableStroke, sizeProp = props.size, disabledProp = props.disabled, requiredProp = props.required, errorProp = props.error, fullWidthProp = props.fullWidth, filledProp = props.filled, focusedProp = props.focused, children = props.children, className = props.className, otherProp = __rest(props, ["as", "disableStroke", "size", "disabled", "required", "error", "fullWidth", "filled", "focused", "children", "className"]);
+    var _a = props.as, Tag = _a === void 0 ? FIELD_CONTROL_DEFAULT_TAG : _a, disableStrokeProp = props.disableStroke, sizeProp = props.size, disabledProp = props.disabled, requiredProp = props.required, errorProp = props.error, fullWidthProp = props.fullWidth, filledProp = props.filled, focusedProp = props.focused, children = props.children, className = props.className, _b = props.background, background = _b === void 0 ? FIELD_CONTROL_DEFAULT_BACKGROUND : _b, otherProp = __rest(props, ["as", "disableStroke", "size", "disabled", "required", "error", "fullWidth", "filled", "focused", "children", "className", "background"]);
     var focused = focusedProp;
     var filled = filledProp;
     var size = sizeProp;
@@ -34,7 +34,7 @@ export var FieldControl = polymorphicComponentWithRef(function (inProps, ref) {
         error: error,
         fullWidth: fullWidth,
     };
-    var _b = __read(useState(initialState), 2), state = _b[0], setState = _b[1];
+    var _c = __read(useState(initialState), 2), state = _c[0], setState = _c[1];
     var label = state.label, value = state.value;
     if (size === undefined && state.size) {
         size = state.size;
@@ -70,6 +70,7 @@ export var FieldControl = polymorphicComponentWithRef(function (inProps, ref) {
             focused: focused,
             disableStroke: disableStroke,
             hasLabel: !!label,
+            background: background,
         }, [className]) }, otherProp, { ref: useMultiRef([ref, innerRef]) }),
         React.createElement(FieldControlContext.Provider, { value: [
                 {
@@ -84,6 +85,7 @@ export var FieldControl = polymorphicComponentWithRef(function (inProps, ref) {
                     hovered: hovered,
                     value: value,
                     disableStroke: disableStroke,
+                    background: background,
                 },
                 setState,
             ] }, children)));

package/__inner__/esm/components/FieldControl/FieldControlContext.d.ts

@@ -1,6 +1,7 @@
 import type { Dispatch, SetStateAction } from 'react';
 import React from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
+import type { FieldControlBackgroundVariant } from './entities';
 export type FieldControlContextValue = {
     size?: FormElementSizeVariant;
     error?: boolean;
@@ -13,6 +14,7 @@ export type FieldControlContextValue = {
     label?: string;
     disableStroke?: boolean;
     value?: string | number;
+    background?: FieldControlBackgroundVariant;
 };
 export declare const FieldControlContext: React.Context<[FieldControlContextValue, Dispatch<SetStateAction<FieldControlContextValue>>]>;
 export declare const useFieldControl: () => [FieldControlContextValue, Dispatch<SetStateAction<FieldControlContextValue>>];

package/__inner__/esm/components/FieldControl/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const FIELD_CONTROL_DEFAULT_TAG = "div";
+export declare const FIELD_CONTROL_DEFAULT_BACKGROUND = "primary";

package/__inner__/esm/components/FieldControl/constants.js

@@ -0,0 +1,2 @@
+export var FIELD_CONTROL_DEFAULT_TAG = 'div';
+export var FIELD_CONTROL_DEFAULT_BACKGROUND = 'primary';

package/__inner__/esm/components/FieldControl/entities/background.d.ts

@@ -0,0 +1,2 @@
+export declare const fieldControlBackgroundVariant: readonly ["main", "primary"];
+export type FieldControlBackgroundVariant = (typeof fieldControlBackgroundVariant)[number];

package/__inner__/esm/components/FieldControl/entities/background.js

@@ -0,0 +1,2 @@
+import { formElementBackgroundVariant } from '../../../types';
+export var fieldControlBackgroundVariant = formElementBackgroundVariant;

package/__inner__/esm/components/FieldControl/entities/index.d.ts

@@ -0,0 +1 @@
+export * from './background';

package/__inner__/esm/components/FieldControl/entities/index.js

@@ -0,0 +1 @@
+export * from './background';

package/__inner__/esm/components/FieldControl/index.d.ts

@@ -1,2 +1,5 @@
+export * from './constants';
+export * from './entities';
 export * from './FieldControl';
 export * from './FieldControlContext';
+export * from './types';

package/__inner__/esm/components/FieldControl/index.js

@@ -1,2 +1,5 @@
+export * from './constants';
+export * from './entities';
 export * from './FieldControl';
 export * from './FieldControlContext';
+export * from './types';

package/__inner__/esm/components/FieldControl/types.d.ts

@@ -0,0 +1,10 @@
+import type { ComponentRef, ElementType } from 'react';
+import type { PolymorphicComponentPropsWithoutRef } from '../../utils';
+import type { FIELD_CONTROL_DEFAULT_TAG } from './constants';
+import type { FieldControlContextValue } from './FieldControlContext';
+export type FieldControlRef = ComponentRef<typeof FIELD_CONTROL_DEFAULT_TAG>;
+export type FieldControlBaseProps = Omit<FieldControlContextValue, 'label'> & {
+    /** data-атрибут для тестирования */
+    'data-testid'?: string;
+};
+export type FieldControlProps<As extends ElementType = typeof FIELD_CONTROL_DEFAULT_TAG> = PolymorphicComponentPropsWithoutRef<FieldControlBaseProps, As>;

package/__inner__/esm/components/FieldControl/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/File/File.js

@@ -1,7 +1,7 @@
 import { __assign, __rest } from "tslib";
 import './File.css';
 import React, { useMemo } from 'react';
-import { WarningTriangleOutlineIcon } from '@ozen-ui/icons';
+import { WarningTriangleIcon } from '@ozen-ui/icons';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { polymorphicComponentWithRef, } from '../../utils/polymorphicComponentWithRef';
@@ -17,7 +17,7 @@ export var File = polymorphicComponentWithRef(function (inProps, ref) {
             return React.createElement(Loader, { color: "var(--color-content-disabled)", size: "s" });
         }
         if (error) {
-            return (React.createElement(WarningTriangleOutlineIcon, { color: "var(--color-content-error)", size: "s" }));
+            return (React.createElement(WarningTriangleIcon, { color: "var(--color-content-error)", size: "s" }));
         }
         return children;
     }, [children, loading, error]);

package/__inner__/esm/components/FileIcon/FileIcon.js

@@ -1,7 +1,7 @@
 import { __assign, __rest } from "tslib";
 import './FileIcon.css';
 import React from 'react';
-import { QuestionCircleOutlineIcon, WarningTriangleOutlineIcon, } from '@ozen-ui/icons';
+import { QuestionCircleIcon, WarningTriangleIcon } from '@ozen-ui/icons';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
@@ -21,10 +21,10 @@ export var FileIcon = polymorphicComponentWithRef(function (inProps, ref) {
             return React.createElement(Loader, { color: "currentcolor", size: iconSize });
         }
         if (status === 'error') {
-            return React.createElement(WarningTriangleOutlineIcon, { size: iconSize });
+            return React.createElement(WarningTriangleIcon, { size: iconSize });
         }
         if (status === 'unknown') {
-            return React.createElement(QuestionCircleOutlineIcon, { size: iconSize });
+            return React.createElement(QuestionCircleIcon, { size: iconSize });
         }
         return renderContent({ content: children, props: { size: iconSize } });
     })();

package/__inner__/esm/components/FilePicker/entities/background.d.ts

@@ -0,0 +1,2 @@
+export declare const filePickerBackgroundVariant: readonly ["main", "primary"];
+export type FilePickerBackgroundVariant = (typeof filePickerBackgroundVariant)[number];

package/__inner__/esm/components/FilePicker/entities/background.js

@@ -0,0 +1,2 @@
+import { fieldControlBackgroundVariant } from '../../FieldControl';
+export var filePickerBackgroundVariant = fieldControlBackgroundVariant;

package/__inner__/esm/components/FilePicker/entities/deprecated.d.ts

@@ -0,0 +1,14 @@
+import type { Ref } from 'react';
+import type { FieldLabelProps } from '../../FieldLabel';
+export type FilePickerPropsDeprecated = {
+    /**
+     * Ссылка на FieldLabel
+     * @deprecated Используйте `labelProps.ref`
+     * */
+    labelRef?: FieldLabelProps['ref'];
+    /**
+     * Ссылка на элемент input
+     * @deprecated Используйте `inputProps.ref`
+     * */
+    inputRef?: Ref<HTMLInputElement>;
+};

package/__inner__/esm/components/FilePicker/entities/deprecated.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/FilePicker/entities/index.d.ts

@@ -0,0 +1,4 @@
+export * from './background';
+export * from './deprecated';
+export * from './size';
+export * from './value';

package/__inner__/esm/components/FilePicker/entities/index.js

@@ -0,0 +1,4 @@
+export * from './background';
+export * from './deprecated';
+export * from './size';
+export * from './value';

package/__inner__/esm/components/FilePicker/entities/size.d.ts

@@ -0,0 +1,2 @@
+export declare const filePickerSizeVariant: readonly ["2xs", "xs", "s", "m", "l"];
+export type FilePickerSizeVariant = (typeof filePickerSizeVariant)[number];

package/__inner__/esm/components/FilePicker/entities/size.js

@@ -0,0 +1,2 @@
+import { formElementSizeVariant } from '../../../types';
+export var filePickerSizeVariant = formElementSizeVariant;

package/__inner__/esm/components/FilePicker/entities/value.d.ts

@@ -0,0 +1,2 @@
+import type { ReactNode } from 'react';
+export type FilePickerRenderValue = (value: File[]) => ReactNode | null;

package/__inner__/esm/components/FilePicker/entities/value.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/FilePicker/index.d.ts

@@ -1,2 +1,3 @@
+export * from './entities';
 export * from './types';
 export * from './FilePicker';

package/__inner__/esm/components/FilePicker/index.js

@@ -1,2 +1,3 @@
+export * from './entities';
 export * from './types';
 export * from './FilePicker';

package/__inner__/esm/components/FilePicker/types.d.ts

@@ -1,25 +1,11 @@
-import type { ChangeEventHandler, ComponentPropsWithRef, ComponentRef, KeyboardEvent, MouseEvent, ReactNode, Ref } from 'react';
+import type { ChangeEventHandler, ComponentPropsWithRef, ComponentRef, KeyboardEvent, MouseEvent } from 'react';
 import type { ExtendableComponentPropsWithRef } from '../../types/ExtendableComponentPropsWithRef';
-import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
 import type { FieldHintProps } from '../FieldHint';
 import type { FieldIconProps } from '../FieldIcon';
 import type { FieldLabelProps } from '../FieldLabel';
-export type FilePickerSizeVariant = FormElementSizeVariant;
-export type FilePickerRenderValue = (value: File[]) => ReactNode | null;
+import type { FilePickerRenderValue, FilePickerSizeVariant, FilePickerPropsDeprecated, FilePickerBackgroundVariant } from './entities';
 type InputElement = ComponentPropsWithRef<'input'>;
 export type FilePickerRef = ComponentRef<'div'>;
-export type FilePickerPropsDeprecated = {
-    /**
-     * Ссылка на FieldLabel
-     * @deprecated Используйте `labelProps.ref`
-     * */
-    labelRef?: FieldLabelProps['ref'];
-    /**
-     * Ссылка на элемент input
-     * @deprecated Используйте `inputProps.ref`
-     * */
-    inputRef?: Ref<HTMLInputElement>;
-};
 export type FilePickerProps = ExtendableComponentPropsWithRef<{
     /** Атрибут id для элемента input */
     id?: string;
@@ -77,6 +63,8 @@ export type FilePickerProps = ExtendableComponentPropsWithRef<{
     }) => void;
     /** Дополнительные css-классы */
     className?: string;
+    /** Задний фон */
+    background?: FilePickerBackgroundVariant;
     /** data-атрибут для тестирования */
     'data-testid'?: string;
 } & FilePickerPropsDeprecated, 'div'>;

package/__inner__/esm/components/ImageBase/ImageBase.css

@@ -0,0 +1,24 @@
+.ImageBase {
+  position: relative;
+  inline-size: 100%;
+  overflow: hidden;
+}
+
+  .ImageBase-Image {
+    position: absolute;
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: contain;
+    object-position: center;
+    opacity: 1;
+    transition: var(--transition-default) opacity ease-in;
+  }
+
+  .ImageBase-Loader, .ImageBase-Placeholder {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inline-size: 100%;
+    block-size: 100%;
+  }

package/__inner__/esm/components/ImageBase/ImageBase.d.ts

@@ -0,0 +1,4 @@
+import './ImageBase.css';
+import type { ImageBaseBaseProps } from './types';
+export declare const cnImageBase: import("@bem-react/classname").ClassNameFormatter;
+export declare const ImageBase: import("../../utils").PolymorphicComponentWithRef<ImageBaseBaseProps, "div", "as">;

package/__inner__/esm/components/ImageBase/ImageBase.js

@@ -0,0 +1,43 @@
+import { __assign, __read, __rest } from "tslib";
+import './ImageBase.css';
+import React from 'react';
+import { logger } from '@ozen-ui/logger';
+import { AnimatePresence, motion } from 'framer-motion';
+import { cn, polymorphicComponentWithRef } from '../../utils';
+import { ImageBasePicture } from './components';
+import { IMAGE_BASE_DEFAULT_ELEMENT } from './constants';
+import { useImageBaseStatus } from './hooks';
+import { ImageBaseLoader } from './modules';
+export var cnImageBase = cn('ImageBase');
+export var ImageBase = polymorphicComponentWithRef(function (_a, ref) {
+    var className = _a.className, src = _a.src, _b = _a.as, Tag = _b === void 0 ? IMAGE_BASE_DEFAULT_ELEMENT : _b, alt = _a.alt, placeholder = _a.placeholder, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, _d = _a.loader, loader = _d === void 0 ? React.createElement(ImageBaseLoader, null) : _d, style = _a.style, _e = _a.decoding, decoding = _e === void 0 ? 'async' : _e, aspectRatio = _a.aspectRatio, sources = _a.sources, pictureRef = _a.pictureRef, imgRef = _a.imgRef, other = __rest(_a, ["className", "src", "as", "alt", "placeholder", "loading", "loader", "style", "decoding", "aspectRatio", "sources", "pictureRef", "imgRef"]);
+    var _f = useImageBaseStatus(src), onLoad = _f.onLoad, onError = _f.onError, isError = _f.isError, isLoading = _f.isLoading;
+    var paddingBottom = (function () {
+        if (!aspectRatio) {
+            return undefined;
+        }
+        var _a = __read(aspectRatio.split('x'), 2), width = _a[0], height = _a[1];
+        if (!width || !height) {
+            logger.error("\u041D\u0435\u0432\u0435\u0440\u043D\u043E \u043F\u0435\u0440\u0435\u0434\u0430\u043D \"aspectRatio\", \u043E\u043D \u0434\u043E\u043B\u0436\u0435\u043D \u0431\u044B\u0442\u044C \u0432 \u0444\u043E\u0440\u043C\u0430\u0442\u0435 `${number}x${number}`");
+            return undefined;
+        }
+        return "".concat((Number.parseFloat(height) / Number.parseFloat(width)) * 100, "%");
+    })();
+    var isShowPlaceholder = !!placeholder && (isError || !src);
+    var isShowLoader = isLoading && !isShowPlaceholder && !!src;
+    return (React.createElement(Tag, __assign({}, other, { ref: ref, role: "img", className: cnImageBase('', className), style: __assign(__assign({}, style), { paddingBlockEnd: paddingBottom }) }),
+        React.createElement(AnimatePresence, null, isShowLoader && (React.createElement(motion.div, { className: cnImageBase('Loader'), initial: "hidden", animate: "visible", exit: "hidden", variants: {
+                visible: { opacity: 1 },
+                hidden: { opacity: 0 },
+            } }, loader))),
+        React.createElement(AnimatePresence, null, isShowPlaceholder && (React.createElement(motion.div, { className: cnImageBase('Placeholder'), initial: "hidden", animate: "visible", exit: "hidden", variants: {
+                visible: { opacity: 1 },
+                hidden: { opacity: 0 },
+            } }, placeholder))),
+        src && (React.createElement(ImageBasePicture, { ref: pictureRef, sources: sources },
+            React.createElement(motion.img, { key: src, ref: imgRef, className: cnImageBase('Image'), onLoad: onLoad, onError: onError, alt: alt, src: src, decoding: decoding, loading: loading, initial: "hidden", animate: isShowLoader || isShowPlaceholder ? 'hidden' : 'visible', variants: {
+                    visible: { opacity: 1 },
+                    hidden: { opacity: 0 },
+                } })))));
+});
+ImageBase.displayName = 'ImageBase';

package/__inner__/esm/components/ImageBase/components/ImageBasePicture/ImageBasePicture.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ImageBasePictureProps } from './types';
+export declare const ImageBasePicture: React.ForwardRefExoticComponent<ImageBasePictureProps & React.RefAttributes<HTMLElement>>;

package/__inner__/esm/components/ImageBase/components/ImageBasePicture/ImageBasePicture.js

@@ -0,0 +1,17 @@
+import React, { forwardRef } from 'react';
+import { isString } from '../../../../utils';
+export var ImageBasePicture = forwardRef(function (_a, ref) {
+    var children = _a.children, sources = _a.sources;
+    if (sources) {
+        return (React.createElement("picture", { ref: ref },
+            sources.map(function (sourceInfo) {
+                if (isString(sourceInfo)) {
+                    return React.createElement("source", { key: sourceInfo, srcSet: sourceInfo });
+                }
+                return (React.createElement("source", { key: sourceInfo.srcSet, srcSet: sourceInfo.srcSet, type: sourceInfo.type, media: sourceInfo.media }));
+            }),
+            children));
+    }
+    return children;
+});
+ImageBasePicture.displayName = 'ImageBasePicture';

package/__inner__/esm/components/ImageBase/components/ImageBasePicture/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ImageBasePicture';
+export * from './types';

package/__inner__/esm/components/ImageBase/components/ImageBasePicture/index.js

@@ -0,0 +1,2 @@
+export * from './ImageBasePicture';
+export * from './types';

package/__inner__/esm/components/ImageBase/components/ImageBasePicture/types.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentRef, ReactNode } from 'react';
+import type { ImageBaseSources } from '../../entities';
+export type ImageBasePictureRef = ComponentRef<'picture'>;
+export type ImageBasePictureProps = {
+    children: ReactNode;
+    sources: ImageBaseSources | undefined;
+};

package/__inner__/esm/components/ImageBase/components/ImageBasePicture/types.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/ImageBase/components/index.d.ts

@@ -0,0 +1 @@
+export * from './ImageBasePicture';

package/__inner__/esm/components/ImageBase/components/index.js

@@ -0,0 +1 @@
+export * from './ImageBasePicture';

package/__inner__/esm/components/ImageBase/constants.d.ts

@@ -0,0 +1 @@
+export declare const IMAGE_BASE_DEFAULT_ELEMENT = "div";

package/__inner__/esm/components/ImageBase/constants.js

@@ -0,0 +1 @@
+export var IMAGE_BASE_DEFAULT_ELEMENT = 'div';

package/__inner__/esm/components/ImageBase/entities/aspectRatio.d.ts

@@ -0,0 +1 @@
+export type ImageBaseAspectRatio = `${number}x${number}`;

package/__inner__/esm/components/ImageBase/entities/aspectRatio.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/ImageBase/entities/imageRef.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentRef } from 'react';
+export type ImageBaseImageRef = ComponentRef<'img'>;

package/__inner__/esm/components/ImageBase/entities/imageRef.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/ImageBase/entities/index.d.ts

@@ -0,0 +1,3 @@
+export * from './aspectRatio';
+export * from './imageRef';
+export * from './source';

package/__inner__/esm/components/ImageBase/entities/index.js

@@ -0,0 +1,3 @@
+export * from './aspectRatio';
+export * from './imageRef';
+export * from './source';

package/__inner__/esm/components/ImageBase/entities/source.d.ts

@@ -0,0 +1,7 @@
+export type ImageBaseSourceObject = {
+    srcSet: string;
+    type?: string;
+    media?: string;
+};
+export type ImageBaseSource = string | ImageBaseSourceObject;
+export type ImageBaseSources = ImageBaseSource[];

package/__inner__/esm/components/ImageBase/entities/source.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/ImageBase/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useImageBaseStatus';

package/__inner__/esm/components/ImageBase/hooks/index.js

@@ -0,0 +1 @@
+export * from './useImageBaseStatus';

package/__inner__/esm/components/ImageBase/hooks/useImageBaseStatus.d.ts

@@ -0,0 +1,7 @@
+export declare const useImageBaseStatus: (src: string) => {
+    onLoad: () => void;
+    onError: () => void;
+    isError: boolean;
+    isLoaded: boolean;
+    isLoading: boolean;
+};

package/__inner__/esm/components/ImageBase/hooks/useImageBaseStatus.js

@@ -0,0 +1,32 @@
+import { __read } from "tslib";
+import { useEffect, useState } from 'react';
+import { useStoredValue } from '../../../hooks/useStoredValue';
+export var useImageBaseStatus = function (src) {
+    var lastFinishedSrc = useStoredValue(null);
+    var _a = __read(useState(src ? 'loading' : 'error'), 2), status = _a[0], setStatus = _a[1];
+    var onLoad = function () {
+        setStatus('loaded');
+        lastFinishedSrc.current = src;
+    };
+    var onError = function () {
+        setStatus('error');
+        lastFinishedSrc.current = src;
+    };
+    var isError = status === 'error';
+    var isLoaded = status === 'loaded';
+    var isLoading = status === 'loading';
+    useEffect(function () {
+        var isAlreadyFinished = lastFinishedSrc.current === src;
+        if (isAlreadyFinished) {
+            return;
+        }
+        setStatus('loading');
+    }, [src]);
+    return {
+        onLoad: onLoad,
+        onError: onError,
+        isError: isError,
+        isLoaded: isLoaded,
+        isLoading: isLoading,
+    };
+};

package/__inner__/esm/components/ImageBase/index.d.ts

@@ -0,0 +1,5 @@
+export * from './entities';
+export * from './modules';
+export * from './constants';
+export * from './ImageBase';
+export * from './types';